3.3 : 리액트 훅 (훅의 규칙, 사용자 정의 훅, 고차 컴포넌트)

1. 훅의 규칙

- 최상위에서만 훅을 호출해야 함,

- 훅을 호출할 수 있는 것은 리액트 함수 컴포넌트 / 사용자 정의 훅 뿐.

 

훅에 대한 정보 저장은 index와 같은 키를 기반으로 구현(객체 기반 링크드 리스트 형태)

-> 순서에 큰 영향을 받음.

 

2. 사용자 정의 훅

서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 사용

리액트에서만 사용.

이름 : use~

값 반환 또는 부수효과 실행

 

✔️ 리액트에서 제공하는 훅으로만 공통 로직을 격리할 수 있는 경우 사용.

그 자체로 렌더링에 영향을 미치지 못하므로, 개발자가 원하는 방향으로 사용 가능(부수효과가 비교적 제한적)

 

 

3. 고차 컴포넌트(HOC : Higher Order Component)

컴포넌트 자체의 로직을 재사용 하기 위한 방법

리액트 아니더라도 js 환경에서 사용 가능.

최적화 및 중복 로직 관리 가능

이름 : with~ 

 

✔️ 함수 컴포넌트 반환값인 렌더링의 결과물에 영향을 미치는 공통로직에 사용

 

고차 컴포넌트는 컴포넌트 전체를 감쌀 수 있으므로, 사용자 정의 훅보다 더 큰 영향력.

부수효과를 최소화 해하고, 최소한으로 사용하는 것을 추천.

 

 

🫧 React.Memo

HOC의 대표적인 예시,

렌더링 전에 props를 비교해 이전과 같으면 렌더링 생략하고, 기억해둔 컴포넌트 반환

+ useMemo를 사용하는 경우에는 값을 반환하기 때문에, JSX 함수 방식이 아닌 {}을 이용한 할당식을 사용