props나 state를 변경하지 않고 다시 렌더링하는 이유는 무엇입니까?

Question

console.log("first")를 포함하는 useEffect만 포함하는 매우 간단한 애플리케이션이 있습니다. 문제는 console.log("first")가 실행될 때 한 번만 인쇄되기를 원하지만 왜 다시 렌더링이 발생하는지 모르겠고 두 번 인쇄된다는 것입니다. 안내해 주세요. 감사합니다.

기본 함수 내보내기 App() {
  useEffect(() => {
    console.log("첫번째");
  }, []);

  반품 (
    <div className="앱">
      <h1>Hello CodeSandbox</h1>
      <h2>마법이 일어나는 것을 보려면 편집을 시작하세요!</h2>
    </div>
  );
}

https://codesandbox.io/s/silly-kilby-yn38cj?file=/src/App.tsx

Answer 1

이것은 React 18 Strict Mode의 새로운 기능이며 이 동작은 의도적인 것입니다. 이 새로운 기능의 주된 이유는 개발자에게 효과 처리 기능에 정리 기능을 추가하도록 상기시키는 것입니다. 따라서 기본적으로 구성 요소는 두 번 마운트됩니다. 즉, 마운트, 마운트 해제 및 다시 마운트됩니다. 그러나 이 동작은 개발 모드에서만 관찰되며 프로덕션 빌드에서는 발생하지 않는다는 점을 아는 것이 중요합니다. 개발 모드에서 동작을 확인하려면 효과 핸들러에 정리 기능을 추가하고 무언가를 기록해 보세요. 예:

으아아아

이제 로그 순서는 다음과 같습니다.

으아아아

이렇게 하면 개발자는 구성 요소에 오류가 발생하지 않도록 하고 구성 요소를 제거할 때 적절한 정리를 수행할 수 있습니다. 이를 더 잘 이해하려면 설명서에 나와 있는 이 예제를 참조하세요. 효과 핸들러 함수의 정리 작업에 대해 자세히 알아보려면 이 문서를 참조하세요.