[Next.js 14][React] API 두 번씩 호출되는 현상 [useEffect][Typescript]

Nextjs든 React든 개발하다보면 useEffect를 이용하여 컴포넌트를 처음 렌더링 할 때 실행해야 할 동작을 구현할 필요가 생긴다.

나의 경우에는 서버에 data-fetch 요청을 넣고, 이 결과로 받아 온 데이터를 이용해 컴포넌트를 렌더링해야 하는 상황이었다.

그런데, 이상하게 api가 두 번씩 호출되는 현상이 계속 발생했다. (사진 참고)

 

useState를 이용해 boolean 상태를 선언하고 한번 실행한 후에 false로 변환하여 if 문으로 실행하지 않도록 했는데도 소용이 없었다.

(대강 이런 느낌의 코드)

const [refresh, setRefresh] = useState<boolean>(true);

useEffect(() => {
    if (refresh) {
        console.log("hello");
        callAPI();
        setRefresh(false);
    }
}, [refresh])

 

---

 

결론을 빠르게 말하자면, 좀 거슬리기는 하지만 크게 신경 쓸 필요는 없는 현상이다.

간단하게 말하자면 리액트 18버전 이후부터는 strictMode로 개발할 때 useEffect가 마운트 시 두 번씩 호출되는 게 정상이라고 한다.

자세한 내용은 아래의 문서를 참고하자.

How to Upgrade to React 18 – React

읽어보면 해당 설정은 개발(development) 환경에서만 적용되고, 실제 웹을 배포(production)한 것에는 영향을 주지 않는다고 한다.

그래서 앞서 언급한 useState<boolean>과 함께 if 문을 작성한다거나 useRef를 쓴다거나 하는 작업은 추가하지 않아도 된다.

 

임시 해결책으로 next.config.js(next.config.mjs)의 reactStrictMode를 false로 설정하는 방법이 있긴 하다.

하지만 타입스크립트의 strict 모드를 절대 끄지 않고 작업하는 나로써는, 이 방법이 정확한 해결책이 되지도 않을 뿐더러 모드를 변경함으로써 생기는 다른 암묵적인 문제가 더 많다고 판단된다.

const nextConfig = {
  reactStrictMode: false,
};

 

웹을 빌드해서 배포한 후 확인해봤을 때 api가 한 번만 실행되는 걸 확인했으니,

개발할 때 좀 거슬리더라도 그냥 두는 게 가장 깔끔하다.

 

끗~