모던 리액트 Deep Dive - 리액트 훅과 고차 컴포넌트

⚡리액트 핵심요소 깊게 살펴보기 - 3.2 사용자 정의 훅과 고차 컴포넌트 중 뭘 써야할까

🌕리액트에서는 재사용할 수 있는 로직을 관리할 수 있는 방법

• 사용자 정의 훅 (custom hook)
• 고차 컴포넌트 (higher order component)

3.2.1 사용자 정의 훅 

• 리액트 훅 기반
• 서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할때 사용되는 것 

🌕사용자 정의 훅의 규칙
use로 시작하는 함수를 만들어야 한다는 것 
→ use로 시작하는 이름을 가지지 않으면 에러가 발생함 

---

3.2.2 고차 컴포넌트 (HOC, Higher Order Component)

• 고차함수( Higher Order Function )의 일종
• 가장 유명한 고차 컴포넌트는 React.memo
• 컴포넌트 자체의 로직을 재사용하기 위한 방법

💡React.memo

• props의 변화가 없음에도 컴포넌트의 렌더링을 방지하기 위해 만들어진 리액트의 고차 컴포넌트

💡React.memo와 useMemo 차이

• 무엇을 메모이제이션하느냐의 차이이고, useMemo를 사용할 경우 값을 반환받기 때문에 JSX함수방식이 아닌 {}을 사용한 할당식을 사용함

🔗React.memo

• 컴포넌트 자체를 메모이제이션함
  부모가 리렌더링되어도, props가 바뀌지 않으면 이 컴포넌트는 다시 렌더링되지 않음

🔗useMemo 

• 값을 계산할 때 사용
  렌더링 때마다 복잡한 계산이나 객체 생성을 매번 하지 않도록 메모이제이션함

🌕고차 함수

• 함수를 인수로 받거나 결과로 반환하는 함수
• 고차함수를 활용하면 인수로 받거나 새로운 함수를 반환해 완전히 새로운 결과를 만들어 낼 수 있음

function add(a){
	return function(b){
    	return a+b
    }
}

const result = add(1) //여기서 result는 앞서 반환한 함수를 가리킴
const result2 = result(2) //비로소 a와b를 더한 3이 반환됨

---

3.2.3 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?

🌕사용자 정의 훅이 필요한 경우 

• 리액트에서 제공하는 훅으로만 공통 로직을 격리할 수 있을 경우 
• 단순 컴포넌트 전반에 걸쳐 동일한 로직으로 값을 제공하거나 특정한 훅의 작동을 취하게 하고싶을 경우
• 사용자 정의 훅은 컴포넌트 내부에 미치는 영향을 최소화해 개발자가 훅을 원하는 방향으로만 사용할 수 있다는 장점이 있음

🌕고차 컴포넌트를 사용해야 하는 경우 

• 함수형 컴포넌트의 반환 값, 즉 렌더링의 결과물에도 양행을 미치는 공통로직일 경우(공통화된 렌더링 로직을 처리할때)

---

🌚사용자 정의 훅 (Custom Hook)고차 컴포넌트 (HOC)

 

형태	함수(useSomething)	함수형 컴포넌트 래퍼(withSomething(Component))
입출력	입력값을 받고 “상태값 + 함수” 반환	컴포넌트를 입력받아 “새 컴포넌트” 반환
사용 위치	함수형 컴포넌트 내부	컴포넌트 정의 바깥
주 사용 목적	비즈니스 로직, 상태 관리, 공통 훅 로직 재사용	UI, 권한제어, 레이아웃, props 주입 등 구조적 재사용
React 16.8 이후 권장도	✅ React 팀이 공식적으로 권장	⚠️ 유지보수성과 가독성 문제로 감소 추세