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

초기 렌더링 시 React useEffect 후크가 실행되는 것을 방지

useEffect 후크는 React 구성 요소의 부작용을 관리하는 데 유용한 도구입니다. 그러나 기본적으로 초기 렌더링을 포함하여 모든 렌더링 후에 실행됩니다. 예제 코드에서 설명한 것처럼 이로 인해 원치 않는 동작이 발생할 수 있습니다. 이를 극복하기 위해서는 두 가지 효과적인 전략이 있습니다.

1. useRef 후크를 사용하여 초기 렌더링 추적

useRef 후크를 사용하면 다시 렌더링할 때 지속되는 변경 가능한 값을 저장할 수 있습니다. 이를 활용하면 useEffect 함수가 처음 실행되는지 추적할 수 있습니다.

예:

const { useState, useRef, useEffect } = React;

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

  const firstUpdate = useRef(true);
  useEffect(() => {
    // Skip the initial render
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("useEffect ran");
  });

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

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

2. useLayoutEffect 후크 활용

useLayoutEffect 후크는 실행 단계 측면에서 componentDidUpdate의 동작을 시뮬레이션하기 위해 도입되었습니다. 브라우저가 그리기 전에 실행되어 시각적 결함을 방지합니다.

예:

const { useState, useLayoutEffect } = React;

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

  useLayoutEffect(() => {
    console.log("useLayoutEffect ran");
  });

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

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

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