props·state로 계산 가능
렌더 중 계산하면 같은 사실을 두 상태로 복제하지 않는다.
그냥 계산
items.length
값의 출처를 알면 Hook 선택이 짧아진다
먼저 누가 값을 소유하는지 결정하고, Effect는 외부 동기화에만 쓴다.
독립적인 단순 상태
사용자 입력처럼 컴포넌트가 직접 소유하는 최소 값만 둔다.
useState
useState("")
여러 사건이 한 상태를 변경
판별 유니온 Action과 순수 reducer로 허용 전이를 모은다.
useReducer
dispatch({ type: "saved" })
네트워크·DOM·구독과 동기화
setup이 읽는 모든 반응형 값은 의존성에 포함한다.
useEffect
return () => connection.close()
Effect의 한 연결은 setup과 cleanup이 대칭을 이룬다
setup
현재 값으로 연결
연결 교체
cleanup → setup
cleanup
연결 해제
Custom Hook 반복되는 상태·Effect 조합을 감싸고, 옵션을 받아 UI가 쓸 값과 동작을 반환한다.