props나 state를 변경하지 않고 다시 렌더링하는 이유는 무엇입니까?
P粉786800174
2023-08-13 11:04:44
<p><code>console.log("first")</code>를 포함하는 <code>useEffect</code>만 포함하는 매우 간단한 애플리케이션이 있습니다.
문제는 <code>console.log("first")</code>가 실행될 때 한 번만 인쇄되기를 원하지만 왜 다시 렌더링이 발생하는지 모르겠고 두 번 인쇄된다는 것입니다. 안내해 주세요. 감사합니다. </p>
<pre class="brush:php;toolbar:false;">기본 함수 내보내기 App() {
useEffect(() => {
console.log("첫번째");
}, []);
반품 (
<div className="앱">
<h1>Hello CodeSandbox</h1>
<h2>마법이 일어나는 것을 보려면 편집을 시작하세요!</h2>
</div>
);
}</pre>
<p>https://codesandbox.io/s/silly-kilby-yn38cj?file=/src/App.tsx</p>
이것은 React 18 Strict Mode의 새로운 기능이며 이 동작은 의도적인 것입니다. 이 새로운 기능의 주된 이유는 개발자에게 효과 처리 기능에 정리 기능을 추가하도록 상기시키는 것입니다. 따라서 기본적으로 구성 요소는 두 번 마운트됩니다. 즉, 마운트, 마운트 해제 및 다시 마운트됩니다. 그러나 이 동작은 개발 모드에서만 관찰되며 프로덕션 빌드에서는 발생하지 않는다는 점을 아는 것이 중요합니다. 개발 모드에서 동작을 확인하려면 효과 핸들러에 정리 기능을 추가하고 무언가를 기록해 보세요. 예:
으아아아이제 로그 순서는 다음과 같습니다.
으아아아이렇게 하면 개발자는 구성 요소에 오류가 발생하지 않도록 하고 구성 요소를 제거할 때 적절한 정리를 수행할 수 있습니다. 이를 더 잘 이해하려면 설명서에 나와 있는 이 예제를 참조하세요. 효과 핸들러 함수의 정리 작업에 대해 자세히 알아보려면 이 문서를 참조하세요.