[250708] TIL

Today I Learned (2025-07-08)

-개발 환경에서 StrictMode 내부의 컴포넌트를 이중 렌더링 함 -렌더 페이즈가 2번 일어남

1. (1차) render phase
2. (cleanup)
3. (2차) render phase
4. commit phase (DOM 반영, useEffect 실행 등)

왜 이렇게 할까 ?

• 부작용 코드, 순수하지 않은 코드를 빨리 찾게 해줌
• 실제 배포 환경에서는 한 번만 render phase 실행해서 성능에 영향 없음

1. 부작용 코드

function BadComponent() {
  // 🚨 안 좋은 예시! (렌더 페이즈에서 직접 부작용 실행)
  fetch("/api/data"); // StrictMode에선 2번 호출됨!
  return <div>안녕하세요!</div>;
}

• useEffect는 페인트 이후에 발생하니 한 번만 찍힘

1. 순수하지 않은 함수

let count = 0;
function BadComponent() {
  count += 1; // 🚨 외부 변수 변경(순수 X)
  return <div>{count}</div>;
}

1. setTimeout , setInterval 을 cleanup 없이 사용

function BadComponent() {
  setTimeout(() => {
    console.log("실행!");
  }, 1000); // StrictMode에서 중복 실행/메모리 누수 위험

  return <div>Timeout 테스트</div>;
}