2026. 05. 31.
[리액트 훅 가이드 3편] 훅의 규칙과 나만의 커스텀 훅 만들기
훅 쓰다가 가장 자주 터지는 포인트를 정리했다. 1. 훅의 규칙 2가지 2. 왜 훅 호출 순서가 중요한지 3. 중복 로직을 줄이는 커스텀 훅 패턴 1. 훅은 무조건 지켜야 하는 규칙이 있다 리액트 훅은 편한 대신, 규칙을 어기면 바로 꼬인다. 훅은 항상 최상위(top level)에서만 호출 훅은 리액트 함수 컴포넌트 또는
태그로 묶인 글을 모아봅니다.
훅 쓰다가 가장 자주 터지는 포인트를 정리했다. 1. 훅의 규칙 2가지 2. 왜 훅 호출 순서가 중요한지 3. 중복 로직을 줄이는 커스텀 훅 패턴 1. 훅은 무조건 지켜야 하는 규칙이 있다 리액트 훅은 편한 대신, 규칙을 어기면 바로 꼬인다. 훅은 항상 최상위(top level)에서만 호출 훅은 리액트 함수 컴포넌트 또는
리액트를 공부하면서 당연하게 쓰던 훅이 왜 생겼는지 다시 정리해봤다. 지금은 함수형 컴포넌트 + 훅이 기본처럼 느껴지지만, 리액트 16.8 이전에는 훅이 없었다. 그때는 상태(State)나 사이드 이펙트를 다루려면 클래스 컴포넌트를 써야 했다고 한다. 이번에 정리한 흐름은 이렇다. 1. 클래스 컴포넌트 생명주기의 한계 2
1. Prop Drilling이 시작되면 신호가 온다 처음에는 props로 충분하지만 부모 자식 손자 증손자까지 같은 값을 계속 전달하기 시작하면 코드 의도가 흐려진다. 특히 아래 상황에서 피로도가 확 올라가며 지역 상태만으로 버티기에 한계가 온다. 중간 컴포넌트는 값을 쓰지도 않는데 전달만 함 값 전달 경로가 길어져서
DOM을 직접 만질 때 자주 쓰는 useRef 랑, 부모 ref를 자식으로 안전하게 넘길 때 쓰는 forwardRef 를 정리해봤다. 1. useRef 로 DOM 직접 가리키기 2. useRef 를 렌더링 없는 저장소로 쓰는 패턴 3. forwardRef 로 ref 전달 문제 해결하기 1. DOM을 직접 가리키는 useR