React에서 useEffect가 두 번 실행됩니다 (개발 모드)

Question

API 호출을 useEffect 안에서 하는데, 콘솔 로그를 보면 fetch가 정확히 두 번 찍힙니다. 의존성 배열은 []로 비워놨고요.

useEffect(() => {
  console.log('fetch!')   // 두 번 찍힘
  fetchData()
}, [])

무한 루프는 아니고 딱 두 번인데, 결제 API 같은 거였으면 큰일 날 뻔했어요. 제가 뭘 잘못한 걸까요?

김영삼 · Accepted Answer

잘못하신 거 없습니다! React 18+의 StrictMode가 개발 모드에서 일부러 이펙트를 마운트→언마운트→다시 마운트 시켜서 두 번 실행하는 거예요. "정리(cleanup)를 제대로 안 하면 버그 나는 코드"를 개발 중에 미리 잡아주려는 의도된 동작입니다.먼저 안심하세요프로덕션 빌드에서는 한 번만 실행됩니다. 배포하면 두 번 안 돌아요.즉, StrictMode를 끄는 게 답이 아니라 두 번 돌아도 안전한 코드로 만드는 게 정답입니다.제대로 고치기 — cleanup으로 중복 무시useEffect(() => { let ignore = false async function run() { const data = await fetchData() if (!ignore) setState(data) // 정리된 요청 결과는 버림 } run() return () => { ignore = true } // cleanup }, [])이렇게 하면 두 번 호출돼도 첫 번째 결과는 무시돼서 화면 깜빡임

react_초심자 · Answer

아 StrictMode였군요... 배포하면 한 번만 된다니 다행이에요. ignore 플래그 패턴도 바로 적용했습니다. 며칠을 헤맸는데 감사합니다 ㅠㅠ

댓글 0