⚠️Error: 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. Did you accidentally call a React Hook after an early return?

두둥 에러 등장

우선 리액트 훅의 2원칙에 대해 알아보자.

React Hook의 2원칙

• Hook은 최상위에서만 선언되어야 한다.
  • 리액트 훅은 호출되는 순서에 의존하기 때문에 훅의 실행순서가 밀리게 되거나 건너뛰면 버그를 이야기해준다.
  • 조건부로 훅을 사용하고 싶다면 훅 내부에 선언해야 한다.

    • 올바른 예시

        useEffect(() => {
          // hooks 최상위 선언부
          const getuserprofile = async () => {
            await GroupService.getGroupOwn()
              .then((res) => res.data.response)
              .then((body) => {
                setOwndata([...owndata, ...body]);
                setIsclick(body[0]);
              });
          };
          if (owndata.length === 0) {
            getuserprofile();
          }
        }, []);

    • 잘못된 예시

      const Container = () =>{
      	const { data, error } = useSelector((state) => state.accounts.accounts);
      	...
          if(error){
          return(
          	<ERR>에러가 발생했습니다.</ERR>
          )
      
          const TableRenderer = useMemo(()=>{<Table/>},[]);
      
          return (
          	{TableRenderer}
          )
          }
      }
      
      // if문과 useMemo부분 코드의 위치를 바꾸면 해결된다!

• 오직 React 함수 내에서만 Hook을 호출해야 한다.
  • 훅을 일반적인 JavaScript 함수에서만 호출하면 안된다.
  • 대신 리액트 함수 컴포넌트나 커스텀 훅에서는 호출이 가능하다.

해결 방법?

⇒ 위의 두 원칙을 지키는 게 우선

• 반복문, 선언문, 중첩된 함수 내에서 훅을 사용하지 않도록 주의
  • return문을 사용하면 안됨!!