Dachae's DevLogs

Advanced React HooksReact를 어느 정도 사용해본 개발자라면 useState, useEffect 같은 기본 훅은 익숙할 것입니다. 하지만 복잡한 상태 관리나 라이프사이클 제어, 퍼포먼스 개선 등 더 세밀한 제어가 필요할 땐 고급 훅(Advanced Hooks)이 큰 도움이 됩니다. 1. useReducer (복잡한 상태 관리를 위한 훅)언제 사용하나요?useState로는 관리하기 힘든 복합 상태상태 전이 로직을 명확하게 정의하고 싶을 때기본 구조const [state, dispatch] = useReducer(reducer, initialState);예제const initialState = { count: 0 };function reducer(state, action) { swit..

React Hooks React 16.8부터 등장한 Hooks(훅)은 함수형 컴포넌트에서도 상태 관리와 사이드 이펙트를 다룰 수 있게 해주며, 컴포넌트 구조를 더욱 직관적으로 바꿨습니다. 이 글에서는 자주 사용되는 기본 훅부터 커스텀 훅 제작까지 핵심 내용을 정리해드립니다. 1. 리액트 훅이란?기존에는 컴포넌트의 상태나 라이프사이클을 제어하려면 클래스형 컴포넌트를 써야 했습니다. 하지만 React Hooks는 함수형 컴포넌트에서도 다음과 같은 기능을 제공해줍니다.상태 관리 (useState)컴포넌트 생명주기 대응 (useEffect)외부 DOM 접근 (useRef)성능 최적화 (useMemo, useCallback)컨텍스트 사용 (useContext).etc 2. 가장 많이 쓰는 기본 훅a. use..