State Hooks

• state를 사용하면 컴포넌트가 사용자 입력과 같은 정보를 기억할 수 있음
• useState 혹은 useReducer를 사용 가능

Context Hooks

• 컴포넌트가 prop로 상태를 전달하지 않고 부모로부터 정보를 받을 수 있음

Ref Hooks

• DOM 노드나 timeout ID와 같이 렌더링에 사용되지 않는 일부 정보를 보유할 수 있게 함
• useImperativeHandle 을 사용하면 컴포넌트가 노출하는 ref를 사용자가 직접 정의 가능 (거의 사용X)

Effect hooks

• 컴포넌트가 외부 시스템에 연결하고 동기화할 수 있도록 함
• 네트워크, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리 사용하여 작성된 위젯 및 기타 비-React 코드 처리하는 것 포함
• Effect는 탈출구
• useLayoutEffect - 브라우저가 화면을 다시 그리기 전 실행
• useIntertionEffect - React가 돔을 변경하기 전에 실행. 동적 CSS 삽입

Performance Hooks

• useMemo - 비용이 많이 드는 계산 결과를 캐싱 가능
• useTransition - state 전환을 비차단 state로 표시하고 다른 업데이트가 이를 중단하도록 허용 가능
• useDefferedValue - UI의 중요하지 않은 부분의 업데이트를 연기, 다른 부분이 먼저 업데이트되도록 할 수 있음

Other Hooks

• useDebugValue - 커스텀 훅에 대해 React 개발자 도구가 표시하는 레이블을 사용자가 직접 정의 가능
• useId - 컴포넌트가 자신과 고유 ID를 연결할 수 있게 해줌. 접근성 API와 함께 사용됨
• useSyncExternalStore - 컴포넌트가 외부 스토어에 구독하도록 함

useState

• 사용자가 제공한 값이 Object.is에 의해 현재 state와 동일하다고 판정되면 React는 컴포넌트와 그 자식들을 리렌더링하지 않음
• React는 state 업데이트를 일괄처리함
• 더 일찍 업데이트해야 하는 경우 flushSync를 사용할 수동 ㅣㅆ음
• 동일한 이벤트에서 여러 업데이트를 수행하는 경우에는 업데이터가 도움이 될 수 있음
• 함수를 초기값에 전달하면 렌더링될 때마다 실행되게 됨. 이 문제를 해결하기 위해 함수 자체를 전달하면 초기화 중에만 함수를 호출함.
• 이전 렌더링에서 얻은 정보를 전달하고 싶을 경우
• 너무 자주 값을 계산하는 것이 걱정된다면 useMemo를 사용할 수 있음
• 렌더링 중에 set을 하는 상황에 유의, 조건 안에서만 있어야 함 그렇지 않으면 렌더링을 반복하다가 깨짐
• 렌더링 중에 다른 컴포넌트의 set 함수를 호출하는 것은 에러임

// 🚩 Wrong: calls the handler during render 
// 🚩 잘못된 방법: 렌더링 동안 핸들러 요청
return <button onClick={handleClick()}>Click me</button>

// ✅ Correct: passes down the event handler
// ✅ 올바른 방법: 이벤트 핸들러로 전달
return <button onClick={handleClick}>Click me</button>

// ✅ Correct: passes down an inline function
// ✅ 올바른 방법: 인라인 함수로 전달
return <button onClick={(e) => handleClick(e)}>Click me</button>

useReducer