-
[Next.js 14][React] API 두 번씩 호출되는 현상 [useEffect][Typescript]웹 개발/소소한 팁, 버그 해결 2024. 3. 22. 04:01
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가 마운트 시 두 번씩 호출되는 게 정상이라고 한다.
자세한 내용은 아래의 문서를 참고하자.
읽어보면 해당 설정은 개발(development) 환경에서만 적용되고, 실제 웹을 배포(production)한 것에는 영향을 주지 않는다고 한다.
그래서 앞서 언급한 useState<boolean>과 함께 if 문을 작성한다거나 useRef를 쓴다거나 하는 작업은 추가하지 않아도 된다.
임시 해결책으로 next.config.js(next.config.mjs)의 reactStrictMode를 false로 설정하는 방법이 있긴 하다.
하지만 타입스크립트의 strict 모드를 절대 끄지 않고 작업하는 나로써는, 이 방법이 정확한 해결책이 되지도 않을 뿐더러 모드를 변경함으로써 생기는 다른 암묵적인 문제가 더 많다고 판단된다.
const nextConfig = { reactStrictMode: false, };
웹을 빌드해서 배포한 후 확인해봤을 때 api가 한 번만 실행되는 걸 확인했으니,
개발할 때 좀 거슬리더라도 그냥 두는 게 가장 깔끔하다.
끗~
'웹 개발 > 소소한 팁, 버그 해결' 카테고리의 다른 글
[Next.js][React] 숫자 3자리마다 , 찍기 (0) 2024.05.08 [Next.js 14] Link나 a 태그 없이 외부 링크로 연결하기 (0) 2024.03.24 [Next.js 14] 간단하게 화면 새로고침하기 (0) 2024.03.20 [Typescript] 변수 타입 확인 방법 [Javascript] (0) 2024.03.20 [Next.js 14] 새 탭에서 링크 열기 [React] (0) 2024.03.20