Hooks

개념 설명

React의 상태와 생명주기를 관리하는 함수로, 함수형 컴포넌트에서 클래스 컴포넌트 기능을 사용할 수 있게 해주는 API.

핵심 포인트

useState: 함수형 업데이트로 stale closure 방지, 지연 초기화로 성능 최적화
useEffect: 렌더링 후 비동기 실행, cleanup 함수로 메모리 누수 방지
useLayoutEffect: DOM 업데이트 직후 동기 실행, 깜빡임 방지
Custom Hook: 로직 재사용과 관심사 분리, use 접두사 규칙 준수
의존성 배열: 참조값 변경 감지로 불필요한 재실행 방지
Hook 규칙: 최상위에서만 호출, 조건부 호출 금지

예시 코드

// useState 함수형 업데이트와 지연 초기화
function Counter() {
  const [count, setCount] = useState(() => {
    // 지연 초기화 - 초기 렌더링 시에만 실행
    return Number(localStorage.getItem('count')) || 0;
  });
  
  const increment = () => {
    // 함수형 업데이트 - 최신 state 보장
    setCount(prev => prev + 1);
  };
  
  const delayedIncrement = () => {
    setTimeout(() => {
      setCount(prev => prev + 1); // stale closure 방지
    }, 1000);
  };
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={delayedIncrement}>Delayed +1</button>
    </div>
  );
}

더 많은 내용을 확인하세요! 📚

“Hooks”의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.

✨ 모든 기술 문서 무제한 액세스

📝 실습 예제와 상세한 코드 설명

🎯 면접 예상 질문과 답변 가이드

플랜 비교하기