1. Hook이란?

Hook은 React 16.8에서 도입된 기능으로, 함수 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 특별한 함수입니다.

1.1 왜 Hook이 필요할까?

Hook이 등장하기 전에는 상태 관리나 생명주기 메서드를 사용하려면 클래스 컴포넌트를 작성해야 했습니다. Hook의 도입으로 함수 컴포넌트에서도 이러한 기능들을 사용할 수 있게 되었습니다.

Hook의 장점:

• 코드가 간결하고 이해하기 쉬움
• 관련 로직을 한 곳에 모을 수 있음
• 로직을 재사용하기 쉬움 (Custom Hook)
• this 바인딩 문제 없음

2. React가 제공하는 기본 Hook

React는 다양한 내장 Hook을 제공합니다.

3. Hook 사용 규칙

Hook을 사용할 때 반드시 지켜야 하는 두 가지 규칙이 있습니다.

3.1 최상위에서만 호출

Hook은 컴포넌트의 최상위 레벨에서만 호출해야 합니다. 조건문, 반복문, 중첩 함수 안에서 호출하면 안 됩니다.

// ❌ 잘못된 사용
function Component() {
  if (condition) {
    const [value, setValue] = useState(0); // 조건문 안에서 호출 X
  }
}

// ✅ 올바른 사용
function Component() {
  const [value, setValue] = useState(0); // 최상위에서 호출

  if (condition) {
    // value 사용
  }
}

3.2 React 함수 내에서만 호출

Hook은 React 함수 컴포넌트 또는 Custom Hook 내에서만 호출해야 합니다.

// ❌ 일반 JavaScript 함수에서 호출 X
function regularFunction() {
  const [value, setValue] = useState(0);
}

// ✅ React 컴포넌트에서 호출
function Component() {
  const [value, setValue] = useState(0);
  return <div>{value}</div>;
}

// ✅ Custom Hook에서 호출
function useCustomHook() {
  const [value, setValue] = useState(0);
  return value;
}

4. 이번 챕터에서 배울 내용

이번 챕터에서는 다음 Hook들을 학습합니다:

1. useState - 컴포넌트에 상태를 추가하고 관리
2. useEffect - 컴포넌트의 부수 효과 처리
3. useRef - DOM 접근 및 값 저장
4. useMemo - 계산 비용이 큰 값의 메모이제이션
5. useCallback - 함수의 메모이제이션
6. Custom Hook - 나만의 Hook 만들기

각 Hook의 개념과 사용법을 익히고, 실습을 통해 활용 방법을 배워보겠습니다.