[React] useEffect() 에러 해결 . 조건문과 useEffect()훅을 잘못쓸때

 

회사에서 프로젝트를 하다가 조건부 함수 구현을 할일이 있었는데 , if문을 useEffect밖에다가 코드를 작성하다가 만난 에러였다.

 

아래와 비슷한 로직이라고 생각하고 , 코드에서 보다시피 조건문이 useEffect를 감싸고 있다.

 

import React, {useEffect, useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  if (count > 0) {
    useEffect(() => {
      console.log('count is greater than 0');
    }, [count]);
  }

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

The error "React hook 'useEffect' is called conditionally" occurs when we use theuseEffecthook conditionally or after a condition that may return a value. To solve the error, move all React hooks above any conditionals that may return a value.

 

 

이런 에러가 날텐데 대략 번역 하면

useEffect"React hook 'useEffect'가 조건부로 호출됨" 오류는 조건부로 또는 값을 반환할 수 있는 조건 이후에 후크 를 사용할 때 발생합니다 . 오류를 해결하려면 값을 반환할 수 있는 조건문 위로 모든 React 후크를 이동하세요. 

 

이런뜻이다.

 

그래서 리액트 공식문서에서 검색을 해서 아래와 같은 결과를 얻을수있었다.

 

참조:https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

• 최상위 수준에서 후크만 호출
• 루프, 조건 또는 중첩 함수 내에서 후크를 호출하지 마십시오.
• 조기 반환 전에 항상 React 함수의 최상위 수준에서 후크를 사용하십시오.
• React 함수 구성 요소 또는 사용자 정의 후크에서만 후크를 호출하십시오.

import React, {useEffect, useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count > 0) {
      console.log('count is greater than 0');
    }
  }, [count]);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

import React, {useEffect, useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  // 👇️ moved hook above condition that may return
  useEffect(() => {
    console.log('count is greater than 0');
  }, [count]);

  // 👇️ condition that may return is below all hooks
  if (count > 0) {
    return <h1>Count is greater than 0</h1>;
  }

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useEffect() 훅을 최상단으로 맞췄더니 에러가 해결!

 

 

결론은

 

useEffect"React hook 'useEffect'가 조건부로 호출됨" 오류는 조건부로 또는 값을 반환할 수 있는 조건 이후에 후크 를 사용할 때 발생합니다 . 오류를 해결하려면 값을 반환할 수 있는 조건문 위로 모든 React 후크를 이동 하면 된다.