[React] Hook의 규칙 및 사용법

1. Hook의 규칙

React Hook을 올바르게 사용하려면 두 가지 규칙을 꼭 지켜야 합니다.

 

(1) Hook은 최상위 레벨에서만 호출해야 합니다.

• Hook은 컴포넌트의 최상위 레벨에서만 호출해야 합니다.
• 조건문, 반복문, 중첩 함수 안에서 Hook을 호출하면 안 됩니다.
• React는 Hook이 호출되는 순서에 따라 상태를 관리하기 때문에, Hook 호출 순서가 달라지면 의도하지 않은 동작이 발생할 수 있습니다.

잘못된 예시(if문에서 호출)

function MyComponent() {
  if (someCondition) {
    useEffect(() => {  // 조건문 안에서 Hook 호출
      console.log('Effect called');
    });
  }
  return <div>Hello</div>;
}

 

올바른 예시

function MyComponent() {
  useEffect(() => {
    if (someCondition) {
      console.log('Effect called');
    }
  });
  return <div>Hello</div>;
}

 

---

(2) React 함수 컴포넌트에서만 Hook을 호출해야 합니다.

• Hook은 React 함수 컴포넌트 또는 Custom Hook에서만 호출할 수 있습니다.
• 클래스 컴포넌트나 일반 자바스크립트 함수에서는 Hook을 사용할 수 없습니다.

 잘못된 예시(일반 함수에서 사용)

 

function regularFunction() {
  const [count, setCount] = useState(0); // 일반 함수에서 Hook 호출
}

 

올바른 예시(리액트 함수 컴포넌트에서 사용)

function MyComponent() {
  const [count, setCount] = useState(0); // React 함수 컴포넌트에서 사용
  return <div>{count}</div>;
}

---

2. 규칙을 검사하는 도구 : eslint-plugin-react-hooks

eslint-plugin-react-hooks 패키지를 사용하여 React Hook의 규칙을 준수하는지 자동으로 검사할 수 있습니다.

• useEffect 나 useCallback에서 의존성 배열을 올바르게 설정했는지 확인 가능
• Hook의 호출 위치가 규칙에 맞는지 검사

설치 및 설정

npm install eslint-plugin-react-hooks --save-dev

 

eslint 설정 파일에 추가

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error", // Hook의 규칙 검사
    "react-hooks/exhaustive-deps": "warn" // 의존성 배열 검사
  }
}

 

---

3. Custom Hook 만들기

custom Hook은 Hook의 로직을 재사용할 수 있도록 만들어진 사용자 정의 함수입니다.

use로 시작하는 이름을 사용해야 하며, 일반 함수와 비슷하지만 다음과 같은 특징이 있습니다.

 

Custom Hook의 특징

1. 단순한 함수 : 기존의 Hook을 조합하여 새로운 기능을 제공

2. 독립성 : Custom Hook 내부의 상태와 효과는 사용하는 컴포넌트와 독립적입니다.

 

Custom Hook이 필요한 상황

• 여러 컴포넌트에서 중복된 상태 관리 또는 효과 로직이 반복될 때
• 공통된 비즈니스 로직을 분리하여 유지보수를 쉽게 하고자 할 때

Custom Hook 만들기

useWindowWidth라는 Custom Hook을 만들어, 현재 브라우저 창의 너비를 관리하는 예시입니다.

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize); // Cleanup
  }, []);

  return width;
}

function MyComponent() {
  const width = useWindowWidth();

  return <div>Window width: {width}px</div>;
}

---

Summary

Hook은 React 애플리케이션의 상태 관리와 효과 로직을 간결하고 재사용 가능하게 만들어줍니다. 

하지만 규칙을 준수하지 않으면 의도치 않은 버그가 발생할 수 있으므로 다음과 같은 규칙을 준수해야 합니다.

1. Hook은 컴포넌트의 최상위 레벨에서만 호출한다.
2. React 함수 컴포넌트 또는 Custom Hook에서만 Hook을 호출한다.
3. eslint-plugin-react-hooks를 사용해 규칙을 검사한다.