[React] Hook

Hook

함수 컴포넌트에서 상태(state)나 생명주기(lifecycle) 같은 기능을 쓸 수 있게 해주는 함수다.

 

Hook이 추가된 이유

컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.

👉 상태 로직을 “기능 단위”로 분리하기가 힘들었다.

복잡한 컴포넌트들은 이해하기 어렵다.

👉 상태 로직과 사이드 이펙트가 생명주기 메서드별로 흩어져 서로 관련 없는 코드들이 하나의 메서드에 섞이기 쉬웠다.

사람과 기계를 혼동시킨다.

👉 JavaScript의 this 동작 방식과 이벤트 핸들러 바인딩으로 인해 이해가 어려웠다.

 

---

 

1. 상태(State) 관리 훅: 컴포넌트가 기억해야 할 값을 다루는 훅

useState

컴포넌트가 기억해야 하는 값을 저장하고, 그 값을 바꾸면 리렌더링이 발생한다.

 

2. 사이드 이펙트(Effect) 훅: 렌더링 ‘외부’ 작업을 다루는 훅

useEffect

의존성 ❌ : 렌더링 될 때마다 실행

비어있는 의존성 배열: 컴포넌트가 마운트될 때 한 번 실행(StrictMode에선 2번처럼)

값이 있는 의존성 배열: 컴포넌트가 마운트될 때 실행되고 의존성 배열의 상태값 따라 다시 실행한다.

 

useLayoutEffect 

DOM 반영 직후, 화면 그리기 전에 실행한다.

 

3. 메모이제이션(최적화) 훅: 불필요한 재계산, 재생성을 방지하는 훅

* 메모이제이션

함수 호출의 결과를 캐싱하고 동일한 입력이 다시 발생할 때 불필요하게 다시 계산하는 대신

캐싱된 결과를 반환하는 프로그래밍 기술

 

useMemo

값을 캐싱하여 불필요한 재계산을 막는다.

 

useCallback

함수를 캐시하여 불필요한 함수 재생성을 막는다.

일반 함수는 렌더링될 때 기존 함수는 가비지 컬렉션되고 새로운 함수가 생성되는 단순한 작업을 한다.
반면, useCallback을 사용하면 의존성 확인을 위해 종속된 값들의 참조를 가지고 있어야 하며,
매 렌더링 시마다 해당 값들을 비교해야 한다. 
함수 정의를 위해서 배열을 할당해야 하고 이는 메모리에 저장한다.

 

메모이제이션이 필요한 경우
1. 비용이 많이 드는 계산
- 상당한 시간이나 리소스가 소요되는 함수나 계산이 있는 경우
-  연산 혹은 처리량이 매우 많아서 렌더링의 문제가 되는 경우

2. 자식 컴포넌트에 함수를 props로 넘길 때
- 부모로부터 동일한 props를 받고 동일한 입력에 대해 동일한 출력을 생성하는 컴포넌트의 경우
➡️ props가 변경되지 않을 때 재렌더링되는 것을 방지
- 자식 컴포넌트로 전달되거나 이벤트 처리기로 사용되는 콜백 함수가 있는 경우
➡️ 콜백에 의존하는 자식 컴포넌트의 불필요한 재렌더링을 방지하면서 렌더링 간에 동일한 함수 참조가 사용

3. 다른 훅의 의존성에 사용될 때
- useEffect의 의존성 목록에 비용이 많이 드는 계산이나 렌더링 간에 변경할 필요가 없는 개체가 있는 경우
- 콜백 함수 등을 의존성에 포함해야 하는 경우

 

메모이제이션이 필요 없는 경우
1. 작은 컴포넌트
-  빠르게 렌더링되는 작고 간단한 컴포넌트의 경우

2. 기본적이거나 빠른 작업
- 기본 산술, 문자열 연결 또는 배열 조작과 같은 간단한 작업

3. (React.memo의 경우) 자주 다시 렌더링되는 컴포넌트
- 컴포넌트의 props가 자주 변경되는 경우

 

4. 참조(Ref) 훅: 렌더링과 무관한 값 또는 DOM 접근하는 훅

useRef

 

5. Context 관련 훅: 전역처럼 공유되는 값 접근하는 훅

useContext

 

참고 자료

- https://d2.naver.com/helloworld/9223303