React의 초기 렌더링에서 'useEffect'가 실행되는 것을 방지하는 방법은 무엇입니까?

초기 렌더링 시 useEffect 실행 방지

React의 useEffect() 후크는 매 렌더링 후 호출을 포함하여 componentDidUpdate()의 동작을 모방합니다. . 그러나 useEffect()는 componentDidUpdate()와 달리 초기 렌더링 시에도 실행됩니다. 이 문서에서는 이 문제를 해결하고 초기 렌더링 단계에서 useEffect()가 실행되지 않도록 방지하는 방법을 설명합니다.

useRef 후크 사용

useEffect()가 다음과 같은지 확인하려면 처음 실행하는 경우 useRef() 후크를 활용하세요. useRef()는 변경 가능한 값을 저장합니다. 이 경우 초기 렌더인지 추적할 수 있습니다.

useLayoutEffect 사용

compositeDidUpdate()와 동일한 단계에서 효과가 발생해야 하는 경우 useLayoutEffect 사용을 고려하세요. () 대신 useEffect().

예

다음 코드는 useRef()를 사용하는 초기 렌더링에서 useEffect()가 실행되는 것을 방지하는 방법을 보여줍니다.

const { useState, useRef, useLayoutEffect } = React;

function ComponentDidUpdateFunction() {
  const [count, setCount] = useState(0);

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

이 코드에서는

1. useState()를 사용하여 카운트 상태를 관리하고 useRef() 후크를 사용하여 첫 번째 업데이트를 추적하는 구성 요소 함수를 정의합니다.
2. useLayoutEffect()를 활용하여 componentDidUpdate()와 동일한 단계에서 효과를 실행합니다.
3. 효과 내부에서 첫 번째 업데이트인지 확인합니다(firstUpdate.current가 true임). 그렇다면 firstUpdate.current를 false로 설정하고 일찍 반환하여 효과가 실행되지 않도록 합니다.

이 코드를 실행하면 "comComponentDidUpdateFunction"이 초기 렌더링 이후에만 기록된다는 것을 알 수 있습니다. 버튼을 클릭하면 componentDidUpdate()의 동작을 모방합니다.

위 내용은 React의 초기 렌더링에서 'useEffect'가 실행되는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!