본문 바로가기
Q&A해결2026년 7월 13일1분 읽기

개발모드에서 useEffect가 두 번 실행돼서 API가 두 번 호출되는데 왜 이런가요?

r
react_seojin
조회 983댓글 2

CRA에서 Vite로 옮기고 React 18로 올린 프로젝트인데요, 컴포넌트 마운트 시 데이터 받아오려고 useEffect 안에서 fetch를 하는데 네트워크 탭을 보면 요청이 딱 두 번씩 나갑니다. 뎁스 배열은 빈 배열 []로 넣었고요.

이상한 건 npm run build로 빌드해서 띄우면 요청이 한 번만 나가요. 개발 서버로 돌릴 때만 두 번입니다. 처음엔 제 로직이 어디서 두 번 호출하나 싶어서 콘솔 찍어보고 별짓 다 했는데 코드상으로는 분명 한 번이거든요.

useEffect(() => {
  fetch(`/api/orders/${id}`)
    .then(r => r.json())
    .then(setData)
}, [])

혹시 StrictMode랑 관련이 있나 싶어서 검색은 해봤는데 정확히 왜 이러는지, 그리고 실무에서 이걸 그냥 둬도 되는 건지 판단이 안 서네요. POST 같은 거였으면 큰일 날 뻔했는데 😅

댓글 0

아직 댓글이 없습니다.
Ctrl+Enter로 등록