• 목록

✅ 초기 렌더에서만 실행돼야 할 코드는 이렇게 막는다

useEffect 의존성 없이 쓰면 위험하다

API 호출이나 특정 로직을 초기 1회만 실행하고 싶을 때:

useEffect(() => {
  fetchData();
}, []);

문제는 개발 중 Strict Mode가 켜져 있으면
초기 렌더가 두 번 실행된다.

✅ 해결: 플래그 ref로 한 번만 실행 제어

const didRun = useRef(false);

useEffect(() => {
  if (didRun.current) return;
  fetchData();
  didRun.current = true;
}, []);

• React 18 이후 개발환경에서만 두 번 실행되는 걸 막을 수 있다

• 운영환경에서는 한 번만 실행됨

• 하지만 이 방식으로 명확하게 1회 실행 보장 가능

✔️ 의도치 않은 중복 실행을 피하고 싶다면
useRef로 실행 여부를 직접 제어하자.