React Hooks는 함수형 컴포넌트에서 상태 관리와 사이드 이펙트를 처리할 수 있게 해주는 핵심 기능입니다. 이 글에서는 각 Hook의 동작 원리와 실전에서 자주 쓰이는 패턴을 살펴봅니다. useState 완벽 이해 useState는 가장 기본적인 Hook입니다. 컴포넌트에 상태를 추가하고, 상태가 변경되면 리렌더링을 트리거합니다. 초기값으로 함수 전달하기 초기값 계산이 비용이 큰 경우, 함수를 전달하면 최초 렌더링에서만 실행됩니다. 함수형 업데이트 이전 상태를 기반으로 업데이트할 때는 함수형 업데이트를 사용해야 합니다. 특히 비동기 상황에서 stale closure 문제를 방지할 수 있습니다. useEffect 제대로 사용하기 useEffect는 컴포넌트의 사이드 이펙트를 처리합니다. API 호출, DOM 조작, 구독 설정 등이 대표적인 사용 사례입니다. 의존성 배열의 함정 의존성 배열에 객체나 배열을 넣으면 매 렌더링마다 새 참조가 생성되어 무한 루프가 발생할 수 있습니다. cleanup 함수의 중요성 컴포넌트 언마운트 시 구독이나 타이머를 정리하지 않으면 메모리 누수가 발생합니다. cleanup 함수는 다음 effect 실행 전과 언마운트 시 호출됩니다. useMemo와 useCallback 렌더링 최적화를 위한 두 Hook입니다. 불필요한 재계산이나 자식 컴포넌트의 불필요한 리렌더링을 방지합니다. useMemo - 값 메모이제이션 비용이 큰 계산의 결과를 캐싱합니다. 의존성이 변경되지 않으면 이전 결과를 재사용합니다. useCallback - 함수 메모이제이션 함수의 참조 동일성을 유지합니다. React.memo로 감싼 자식 컴포넌트에 콜백을 전달할 때 유용합니다. 언제 사용해야 할까? 모든 값과 함수를 메모이제이션하는 것은 오히려 성능에 해로울 수 있습니다. 다음 경우에만 사용하세요: 비용이 큰 계산 (정렬, 필터링, 변환) React.memo로 감싼 자식에게 전달하는 props 다른 Hook의 의존성으로 사용되는 값 useRef 활용 패턴 useRef는 .current 프로퍼티에 변경 가능한 값을 보관하는 컨테이너입니다. 리렌더링을 트리거하지 않는다는 점이 useState와의 핵심 차이입니다. DOM 접근 가장 흔한 사용 사례는 DOM 요소에 직접 접근하는 것입니다. 이전 값 기억하기 렌더링 간에 이전 값을 추적할 때 유용합니다. 커스텀 Hook 만들기 커스텀 Hook은 로직의 재사용을 가능하게 합니다. use로 시작하는 함수로, 내부에서 다른 Hook을 호출할 수 있습니다. useLocalStorage useDebounce useMediaQuery 마치며 React Hooks는 단순해 보이지만, 올바르게 사용하려면 클로저, 참조 동일성, 렌더링 사이클에 대한 이해가 필요합니다. 각 Hook의 특성을 정확히 파악하고 적절한 상황에서 사용하는 것이 중요합니다.