[ReactJS] 리액트 오류, React Hook "useEffect" is called conditionally

React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks

 

 

---

 

 

오류 발생 원인

useEffect가 조건문 안에서 호출되거나, 렌더링에 따라 조건적으로 호출되는 경우에 React가 훅을 호출하는 순서를 추적할 수 없어서 에러가 발생한다.
예를 들어, useEffect가 조건에 따라 호출되면, React는 그 조건이 변경될 때마다 훅이 호출되는 순서가 달라지므로 상태를 관리할 수 없다.

 

 

 

오류 해결방법

useEffect를 제일 최상단에 넣으니까 해결된 이유는 리액트 훅 규칙 때문이다. 리액트 훅은 컴포넌트의 렌더링 과정에서 항상 동일한 순서로 호출되어야 한다. 그렇지 않으면 리액트가 훅의 상태와 컴포넌트의 상태를 제대로 추적할 수 없게 되어 오류를 내는 것이다.

 

리액트 훅 규칙
훅은 컴포넌트의 최상위에서 호출해야 하며, 조건문이나 반복문 내에서 호출하면 안된다.
훅은 컴포넌트가 렌더링될 때마다 같은 순서대로 호출되어야 한다. 만약 호출 순서가 달라지면 리액트는 이전 렌더링과 현재 렌더링에서의 훅 상태를 비교할 수 없게 된다.

 

왜 최상단에서 호출해야 하는지?
React는 훅 호출 순서를 기억하고, 이를 통해 상태를 관리한다. 만약 훅이 조건문 내에서 호출되면, 조건이 다를 때마다 훅 호출 순서가 바뀌기 때문에 리액트가 상태를 잘못 추적하게 되어 에러가 발생시킨다.
훅을 최상단에서 호출하면, 리액트는 렌더링될 때마다 항상 같은 순서로 훅을 호출하게 되어 상태를 올바르게 관리할 수 있다.

 

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

  // useEffect는 항상 렌더링 시 같은 순서로 호출되어야 함
  useEffect(() => {
    console.log("Effect triggered");
  }, [count]);

  if (count > 10) {
    // 이 안에서 훅을 호출하면 안 됨
    useEffect(() => {
      console.log("This would cause an error");
    }, []);
  }

  return <div>{count}</div>;
}

 

위의 코드처럼 useEffect를 조건문 내에서 호출하면 리액트가 훅 호출 순서를 추적하지 못하고 에러를 발생시킨다.
따라서 useEffect는 조건문 밖에서 최상단에 정의되어야만 리액트가 일관되게 훅을 처리할 수 있다.