Dachae's DevLogs

useCallback React를 사용하다 보면 컴포넌트가 생각보다 자주 리렌더링되거나, 자식 컴포넌트가 의미 없이 반복해서 렌더링되는 문제를 경험하게 됩니다. 이럴 때 자주 등장하는 해결책이 바로 useCallback 훅입니다.useCallback 은 함수의 참조값을 유지해 불필요한 렌더링을 줄이는 데 도움을 주는 도구이지만, 언제 써야 효과가 있고, 언제 쓰지 말아야 하는지에 대한 명확한 기준 없이 무작정 사용하는 경우가 많습니다.이 글에서는 useCallback 의 기본 개념부터, 실제 사용 예제, 그리고 사용을 권장하는 상황과 피해야 할 상황까지 모두 정리합니다. 성능 최적화를 위해 useCallback 을 고민하고 있다면, 이 글이 그 판단에 확실한 기준을 줄 수 있을 거예요. 1. useCa..

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..