React hooks 종류 파헤쳐보기

React hooks 공식 문서 : https://react.dev/reference/react/hooks

Built-in React Hooks

1. State Hooks

state는 컴포넌트가 값을 기억할 수 있게 도와준다.
State Hooks는 크게 두 가지가 있다.

• useState : state를 직접적으로 업데이트 할 수 있는 hook.
• useReducer : state를 업데이트하는 로직을 reducer function 안에 담은 hook.

다양한 이벤트 핸들러에 의해 자주 업데이트되는 state는 업데이트 로직를 컴포넌트 외부 함수(reducer)에서 선언할 수 있다.
ex) addTask, updateTask, deleteTask
-> 3개의 이벤트 핸들러에서 setTasks를 호출하게 되는 경우 컴포넌트가 커질수록 state logic이 흩어지게 된다.
-> 이러한 복잡성을 줄이기 위해 컴포넌트 외부에 reducer라고 부르는 함수를 만들어 로직을 따로 관리할 수 있다.

2. Context Hooks

context는 멀리 있는 부모 컴포넌트에서 props 없이도 데이터를 받을 수 있게 도와준다.
(전역 상태 관리로 props drilling 문제 해결)

• useContext : context를 읽고 구독하는 hook

3. Ref Hooks

ref는 컴포넌트가 렌더링에 사용하지 않는 정보를 저장할 수 있게 도와준다.
state와 다르게 ref를 업데이트하면 컴포넌트에 리렌더링이 발생하지 않는다.
(따라서 컴포넌트 UI에 영향을 주지 않는 정보를 저장할 때 씀)
ref는 React의 기본 흐름에서 벗어나 특정 작업을 해야 할 때 사용하는 도구로, 이를 escape hatch라고 표현한다.
예를 들어, React의 렌더링 시스템 외부에 있는 시스템(브라우저의 내장 API 등)과 상호작용할 때 유용하다.

• useRef : 컴포넌트 내에서 ref를 선언할 때 사용.
• useImperativeHandle : 컴포넌트가 외부에서 접근할 수 있는 ref를 커스터마이즈할 수 있게 도와줌. 일반적으로 잘 안씀.

4. Effect Hooks

effect는 컴포넌트가 외부 시스템과 연결되고 일치되도록 도와준다.
ex) network, browser DOM, animations, widgets written using a different UI library와 그외 non-React code
effect도 React의 기본 흐름에서 벗어나 특정 작업을 해야 할 때 사용하는 도구로 escape hatch에 해당함.

⭐️ 중요 : effect는 주로 외부 시스템과 상호작용할 때 사용되며, 애플리케이션의 데이터 흐름을 관리하는 데 사용하지 않아야 한다.
데이터 흐름을 관리하는 데 effect를 사용하면 React의 기본 설계 철학에 맞지 않기 때문에, 애플리케이션 내에서 외부 시스템과 상호작용하지 않는다면 effect를 사용할 필요가 없다.

• useEffect : 컴포넌트를 외부 시스템과 연결해주는 hook

useEffect는 일반적으로 컴포넌트가 렌더링된 후에 실행되지만, 타이밍에 따라 두 가지 특별한 variation이 있다.

• useLayoutEffect : 브라우저가 화면을 다시 그리기 전에 실행된다. 이 훅은 레이아웃을 측정하거나 DOM의 상태를 확인해야 할 때 사용된다.
  ex. 화면에 그리기 전에 DOM 요소의 크기나 위치를 측정해야 할 때
• useInsertionEffect : React가 DOM을 변경하기 전에 실행된다. 주로 동적 CSS를 삽입하는 데 사용된다.

5. Performance Hooks

성능을 최적화하는 일반적인 방법은 불필요한 작업을 하지 않는 것이다.
예를 들어 React에게 캐싱된 정보를 이용하게 하거나 바뀐게 없다면 리렌더링을 하지 않도록 하는 것.

• useMemo : expensive calculation의 결과를 캐시하는 hook.
• useCallback : 컴포넌트에 넘기기 전에 함수를 캐시하는 hook.

가끔 화면에 업데이트가 필요하기 때문에 리렌더링을 스킵할 수 없는 경우가 있다.
이런 경우 비동기적인 업데이트에서 동기적인 업데이트를 분리해서 처리할 수 있다.

• 동기적 업데이트 : 사용자가 입력 필드에 타이핑할 때와 같이 즉각적인 반응이 필요한 상황. UI가 차단(blocking) 되지 않도록 동기적으로 처리되어야 함.
• 비동기적 업데이트 : 차트 업데이트와 같이 즉각적인 반응을 요구하지 않는 작업은 UI를 차단하지 않아도 됨.

렌더링을 최적화하기 위해 아래 hook들을 쓸 수도 있다.

• useTransition : state를 non-blocking하게 업데이트하여 다른 부분이 먼저 업데이트되도록 하는 hook.
• useDeferredValue : UI의 중요하지 않은 부분의 업데이트를 지연시켜 다른 부분들이 먼저 업데이트되도록 하는 hook

non-blocking update vs blocking update

• blocking update : 상태가 변경될 때 해당 상태 변경이 완료될 때까지 다른 작업(예: UI 업데이트)을 막는 것. 예를 들어 긴 계산이나 데이터 로딩이 끝날 때까지 화면이 멈추거나 느려질 수 있다.
• non-blocking update : 긴 작업 중에도 다른 업데이트가 우선적으로 처리되도록 함. 예를 들어 사용자가 검색 입력을 할 때 검색 결과 렌더링 시간이 오래 걸리는 경우 검색 결과 렌더링을 non-blocking하게 처리하고 사용자 입력에 대한 UI는 먼저 업데이트하는 식으로 처리할 수 있음.

6. Other Hooks

애플리케이션 코드에서는 일반적으로 쓰이지 않고 라이브러리를 만들때 유용한 hook들

• useDebugValue : 커스텀 훅에 대해 React DevTools에 표시될 라벨을 커스터마이즈할 수 있게 해줌.
• useId : 컴포넌트가 자신과 연결된 고유한 ID를 할당할 수 있게 해줌. 주로 접근성 API와 함께 사용됨.
• useSyncExternalStore : 컴포넌트가 외부 저장소에 구독(subscribe)할 수 있게 해줌.
• useActionState : 액션의 상태를 관리할 수 있게 해줌.