#React

훅 쓰다가 가장 자주 터지는 포인트를 정리했다. 1. 훅의 규칙 2가지 2. 왜 훅 호출 순서가 중요한지 3. 중복 로직을 줄이는 커스텀 훅 패턴 1. 훅은 무조건 지켜야 하는 규칙이 있다 리액트 훅은 편한 대신, 규칙을 어기면 바로 꼬인다. 훅은 항상 최상위(top level)에서만 호출 훅은 리액트 함수 컴포넌트 또는

리액트를 공부하면서 당연하게 쓰던 훅이 왜 생겼는지 다시 정리해봤다. 지금은 함수형 컴포넌트 + 훅이 기본처럼 느껴지지만, 리액트 16.8 이전에는 훅이 없었다. 그때는 상태(State)나 사이드 이펙트를 다루려면 클래스 컴포넌트를 써야 했다고 한다. 이번에 정리한 흐름은 이렇다. 1. 클래스 컴포넌트 생명주기의 한계 2

1. Prop Drilling이 시작되면 신호가 온다 처음에는 props로 충분하지만 부모 자식 손자 증손자까지 같은 값을 계속 전달하기 시작하면 코드 의도가 흐려진다. 특히 아래 상황에서 피로도가 확 올라가며 지역 상태만으로 버티기에 한계가 온다. 중간 컴포넌트는 값을 쓰지도 않는데 전달만 함 값 전달 경로가 길어져서

1. 상태도 소속이 있다: 지역, 전역, 서버 상태 관리를 시작할 때 먼저 한 일은 “이 값이 어디 소속인가?”를 구분하는 것이었다. 이걸 안 하면 로컬 상태로 버틸 걸 전역으로 올리거나, 서버 상태를 클라이언트 상태처럼 다루는 실수를 반복하게 됐다. 지역 상태(Local State) 예: 인풋 값, 모달 열림 여부, 탭

DOM을 직접 만질 때 자주 쓰는 useRef 랑, 부모 ref를 자식으로 안전하게 넘길 때 쓰는 forwardRef 를 정리해봤다. 1. useRef 로 DOM 직접 가리키기 2. useRef 를 렌더링 없는 저장소로 쓰는 패턴 3. forwardRef 로 ref 전달 문제 해결하기 1. DOM을 직접 가리키는 useR