[React] (리액트 공부하기 18) Hook의 규칙

젼이·2025년 1월 10일

React

리액트 정복하기

목록 보기

18/36

리액트에서 Hook은 강력한 기능을 제공하지만, 이를 올바르게 사용하기 위해 반드시 지켜야 할 규칙이 있다.
이 규칙들은 리액트가 컴포넌트의 생명주기를 정확히 관리할 수 있도록 보장해 주는 역할을 한다.

1. 최상위 레벨에서만 호출

설명:

Hook은 컴포넌트의 최상위 레벨에서만 호출해야 한다.

즉, 조건문, 반복문, 또는 함수 안에서 호출하면 안된다.
이유는 Hook의 호출 순서가 매 렌더링마다 동일하게 유지되어야 하기 때문이다.

예시 코드 (잘못된 경우):

function MyComponent() {
  const [name, setName] = useState("abc");
  
  if (name !== "") {
    // 잘못된 사용
    useEffect( () => {
      console.log("이름이 변경되었습니다.");
    });
  }
  
  return <div>{name}</div>;
}

위 코드는 조건문 안에서 useEffects를 호출했기 때문에 잘못된 사용이다.
렌더링 시 조건에 따라 useEffect가 호출될 수도, 호출되지 않을 수도 있다.
이렇게 되면 Hook의 호출 순서가 달라지면서 문제가 발생할 수 있다.

수정된 코드 (올바른 경우):

function MyComponent() {
  const [name, setName] = useState("abc");
  
  useEffect( () => {
    if (name !== "") {
      console.log("이름이 변경되었습니다.");
    }
  });
  return <div>{name}</div>;
}

조건문을 useEffect 내부로 옮겼다. 이제 useEffect는 항상 호출되므로 문제가 없다.

2. 리액트 함수 컴포넌트에서만 호출

설명:

Hook은 일반 자바스크립트 함수에서 호출하면 안 된다. 반드시 리액트의 함수 컴포넌트 또는 커스텀 Hook 내부에서만 호출해야 한다.

이는 Hook의 사용 범위를 제한하고, 리액트 컴포넌트와 관련된 상태 관리 및 생명주기를 명확히 하기 위함이다.

잘못된 코드:

// 일반 자바스크립트 함수에서 Hook을 호출하면 안 됨
function doSomething() {
  const [state, setState] = useState(0); // 잘못된 사용
}

올바른 코드:

function MyComponent() {
  const [state, setState] = useState(0);
  
  return (
    <button onClick={() => setState(state + 1)}>
    {state}번 클릭했습니다.
    </button>
   );
}