React Hooks 심화 학습

React Hooks는 함수형 컴포넌트에서 상태와 생명주기를 관리할 수 있게 해주는 강력한 기능입니다.

useState

useState는 컴포넌트의 상태를 관리합니다.

const [count, setCount] = useState(0);

useEffect

useEffect는 사이드 이펙트를 처리합니다.

useEffect(() => {
  // 컴포넌트 마운트 시 실행
  return () => {
    // 클린업 함수
  };
}, [dependencies]);

커스텀 훅

로직을 재사용하기 위해 커스텀 훅을 만들 수 있습니다.

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  
  return { count, increment, decrement };
}

Hooks를 잘 활용하면 더 깔끔하고 재사용 가능한 코드를 작성할 수 있습니다.