리액트 훅

도입 배경

맨 처음 리액트는 React.createClass() 방식으로 컴포넌트를 만들었음
그 후 ES6 로 클래스 문법 도입
클래스 컴포넌트는 this 바인딩이나 생명 주기 메서드, HOC 패턴의 복잡성 등 문제 있음
2018년 리액트 팀에서 공식적으로 아래 이유로 훅 필요성 설명
1. 컴포넌트 간 상태 로직 재사용 어려움
2. 복잡한 컴포넌트 이해 어려움
3. 클래스가 사람과 기계 모두에게 혼란스러움

State (상태), Context, Ref, Effect, Performance, 기타로 구분
최상단에서만 호출 (이유는 3.2 연결 리스트(Linked List)로 훅 순서 관리)에 있는데 자바스크립트 공부 정리하면서 다시 이해하자,연결 리스트 때문인거 같은데 명확히는 이해 못함
이전에 래퍼로 싸서 복잡했던 로직을 기능과 ui 를 분리하는 식의 추출이 쉬워짐
커스텀 훅은 use 로 시작해서 여러 훅을 조합해 함수로 만들 수 있다.
하나의 훅은 하나의 기능만 하는 것이 원칙

분류	훅 이름	역할 및 예시
State Hooks	useState, useReducer	상태 선언(`useState(0)`), 복잡 로직 시 리듀서 활용
Context Hooks	useContext	Context 구독(`const theme = useContext(ThemeCtx)`)
Ref Hooks	useRef, useImperativeHandle	DOM 노드·값 레퍼런스(`const ref = useRef(null)`)
Effect Hooks	useEffect, useLayoutEffect, useInsertionEffect	사이드 이펙트 관리(`useEffect(()=>{},[])`)
Performance	useMemo, useCallback, useTransition, useDeferredValue	계산·함수 캐싱, 업데이트 우선순위 제어
기타	useDebugValue, useId, useSyncExternalStore, useActionState	DevTools 표시, 고유 ID 생성, 외부 스토어 구독 등