React: 정리 기능은 얼마나 자주 실행되나요?

상태 변수가 있는 React 구성 요소는 해당 변수가 업데이트되면 다시 렌더링을 트리거합니다. 이는 예상된 것이며 React의 핵심 기능 중 하나입니다. 또한 구성 요소는 구성 요소가 "마운트 해제"될 때마다 트리거되는 정리 기능을 제공합니다. 그런데 이 정리 기능은 실제로 얼마나 자주 실행되나요?

이 데모에서 살펴보겠지만 정리 함수에는 여러 트리거가 있을 수 있지만 일반적인 트리거는 부작용에 연결될 때 상태 변수를 업데이트하는 것입니다.

간단히 말하면, React 구성 요소가 useEffect를 사용하고 특정 상태 변수를 따르는 경우 다음 예를 살펴보겠습니다.

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

카운터가 업데이트될 때마다 정리 기능이 호출됩니다.

상태 변수가 업데이트되면 React는 구성 요소를 다시 렌더링합니다. 즉, 먼저 해당 구성 요소를 "제거"한 다음 다시 "렌더링"해야 합니다. 가상 DOM은 업데이트가 필요한 노드를 최적화하지만 논리 수준에서는 정리 기능이 계속 호출됩니다.

대부분의 경우 이는 괜찮고 예상되는 현상입니다. 그러나 정리 함수가 이벤트 보고, 리스너 제거 등의 작업을 수행하는 경우 정리 함수는 상태 변수에 따라 여러 번 호출되므로 의도적인 것인지 확인하세요.

데모

데모를 살펴보겠습니다.

• 개발자 도구에서 콘솔을 엽니다.
• 두 개의 로그가 표시됩니다.

Child mounted
Page mounted

즉, 페이지와 하위 구성 요소가 모두 렌더링되었음을 의미합니다.

• 위에서 공유한 스니펫을 기억하신다면 useEffect는 카운터에 연결되어 있으며 첫 번째 버튼을 클릭할 때 증가합니다. 지금은 Increment 0이라고 나와야 합니다. 계속해서 클릭해 보겠습니다.

• 콘솔을 계속 주시하면서 4개의 로그가 어떻게 추가되었는지 확인하세요.
  

Child unmounted
Page unmounted
Child mounted
Page mounted

상태 변수 counter가 업데이트되었으며, counter에 연결된 두 개의 useEffect 후크가 있으므로 정리 기능이 실행되었음을 의미합니다. Page 구성 요소의 경우 useEffect가 상태 변수에 연결되는 반면 Child 구성 요소의 경우 부작용은 prop 변수에 연결되며 소스는 여전히 동일한 카운터 상태 변수입니다.

또한 useEffect에 연결되지 않은 다른 상태 변수를 업데이트하는 Flag Off 버튼을 볼 수 있습니다. 즉, 이 버튼을 클릭해도 정리 기능이 실행되지 않습니다.

결론

정리 기능은 React에서 많이 사용되며, 특히 구성 요소가 "완료"되면 내용을 보고하기 위해 더욱 그렇습니다. 그러나 useEffect를 상태 변수에 연결할 때는 주의하세요. 데모에서 볼 수 있듯이 이로 인해 상태 변수가 업데이트될 때마다 정리 함수가 호출되는데 이는 예상하지 못한 일입니다.

대부분의 경우 정리 기능은 상태 변수 없이 useEffect에 포함됩니다.

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

하나의 구성 요소에 여러 개의 useEffect 후크가 있는 것은 괜찮습니다. 이 경우 상태 변수에 반응하는 것과 정리 기능을 설정하는 것이 있을 수 있습니다.

Child mounted
Page mounted

질문에 답하기 위해 구성요소가 마운트 해제될 때 정리 함수가 호출됩니다. 이는 사용자가 앱의 다른 섹션으로 이동하거나 useEffect가 상태 변수에 따라 달라지는 경우 해당 상태 변수가 업데이트될 때마다 N번 호출될 때 발생할 수 있습니다.

위 내용은 React: 정리 기능은 얼마나 자주 실행되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!