props나 state를 변경하지 않고 다시 렌더링하는 이유는 무엇입니까?
P粉786800174
P粉786800174 2023-08-13 11:04:44
0
1
577
<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>
P粉786800174
P粉786800174

모든 응답(1)
P粉821274260

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

으아아아

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

으아아아

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿