[React .hook] Next.js 프로젝트에서 useEffect 호출이 2번되는 오류

Before we start...

 

useEffect

 

React의 가장 기본적인 hook이다.

 

한달전에 우리가 같이 복기한 시간이 있었다.

 

2024.02.17 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useEffect ?

[React .hook] What is useEffect ?

 

mount 되었을 때 unmount되었을 때 value가 바뀌었을 때 사용하는 hook이다.

 

오늘 이때 복기한 내용을 토대로 지금 진행중인 프로젝트에 적용할거다.

 

So how can we fix this error?

 

 

해당 프로젝트는 Next.js를 활용한 프로젝트를 진행하고 있었다.

 

useEffect가 호출이 두번 되는 상황이 발생한다.

 

              "Content-Type": "application/json",
          },
          withCredentials: true,
      })
      .then((response) => {
        if (response.data.success) {
          setState(!state)
        }
      })
  }

  const detectChangedData = useMemo(()=>{
    getCartData();
  },[state])
  
  const detectCheckedAll = useMemo(() => {
    setAllChecked(isAllchecked());
  },[checkedItems])

  useEffect(() => {
    const fetchData = () => {
      getCartData();
      handleCheckAllChange();
      setAllChecked(isAllchecked());
    };
    fetchData();
    console.log('useEffect 호출1...')
    
  }, []);



  return (
    <div className='flex-1 p-[50px]'>

 

 

useEffect에서 의존성 배열에 빈배열로 설정해놨는데

 

왜 두번이나 가져오는걸까?

 

아니 애초에 처음 렌더링될때 두번가져온다는건 의존성 배열과 상관이 있기는 한걸까?

 

구글링 하던중

 

Next.js는 개발자 모드에서는 렌더링이 두번되는 상황이 있다고 한다.

 

 

 

 

위 이미지 처럼 reactStrictMode를 false로 해주면

 

 

위의 GIF처럼 새로고침이 되더라도 한번만 호출할 수 있다.

 

이 글을 마치며...

 

reactStrictMode가 default로 true로 설정되어있으면

 

useEffect는 호출이 2번 된다.

 

참고하자