useRef()를 사용하여 구성 요소가 렌더링된 횟수 추적 - React

먼저 초보자가 이 문제를 어떻게 해결하려고 하는지 모든 방법을 생각해 보겠습니다.

원하는 경우 따라가려면 새 반응 프로젝트를 만들고 App.jsx 또는 원하는 구성 요소에 이만큼의 코드를 삽입하고 index.css 및 App.css에서 모든 항목을 제거하세요.

import { useState } from "react";

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

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

지금은 다음과 같이 미리 볼 수 있습니다.

위 코드에서는 버튼을 클릭할 때마다 1씩 증가하는 count라는 상태 변수를 만들었습니다. 여기서 count는 여기서 아무 작업도 수행하지 않는 추가 상태 변수이지만 상황을 더 잘 이해하는 데 도움이 됩니다. 이전에 React로 코딩해 본 적이 있다면 이 코드가 부담스럽지 않을 것입니다.

그럼 본론으로 들어가겠습니다...

1. 상태변수 사용하기

이것은 상태 변수를 생성하여 0으로 초기화하고 구성 요소가 렌더링될 때마다 1씩 증가시키는 것과 같이 우리 대부분이 생각하는 첫 번째 접근 방식입니다.

앱 구성요소는 다음과 같습니다.

function App() {
  const [count, setCount] = useState(0);
  const [numberOfTimesRendered, setNumberOfTimesRendered] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
    setNumberOfTimesRendered(numberOfTimesRendered + 1);
  };

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

이 접근 방식은 여기서는 잘 작동하지만 결함이 많습니다. 이상적으로는 강제 렌더링 버튼을 클릭할 때 구성 요소가 한 번만 렌더링되지 않습니다. 버튼을 클릭하면 카운트 값이 1씩 증가하여 구성 요소가 다시 렌더링됩니다. 상태 변수의 변경으로 인해 구성 요소가 다시 렌더링된다는 것은 우리 모두 알고 있듯이 말입니다. 그러나 setCount(count 1)에 의한 재렌더링 후에는 여기서 끝나며, setNumberOfTimesRendered(numberOfTimesRendered 1)가 트리거되어 구성 요소가 다시 렌더링됩니다.

numberOfTimesRendered 값은 1씩 증가하지만 Force Render 버튼을 클릭할 때마다 구성 요소가 두 번 렌더링됩니다. 이는 이러한 종류의 문제에 대해 상태 변수를 사용하는 것이 최선은 아니지만 최악의 접근 방법인 이유를 보여줍니다.

2. 전역 변수 사용

생각할 수 있는 또 다른 접근 방식은 다음과 같이 구성 요소 수명 주기 외부에서 전역 변수를 정의하고 구성 요소가 다시 렌더링될 때 이를 1씩 증가시키는 것입니다.

let numberOfTimesRendered = 0;

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

  const handleRender = () => {
    setCount(count + 1);
  };

  numberOfTimesRendered += 1;

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

이 접근 방식은 제대로 작동하며 추가 렌더링을 발생시키지 않으며 이에 대한 최선의 솔루션인 것처럼 보이지만 구성 요소 수명 주기 외부에 아무것도 정의하면 안 되기 때문에 그렇지 않습니다.

3. 지역변수 활용하기

위와 동일한 접근 방식을 생각할 수도 있지만 구성 요소 내부에 로컬 변수가 있으면 이보다 최악의 접근 방식은 없습니다. 구성 요소가 렌더링될 때마다 로컬 변수가 0으로 다시 초기화되기 때문입니다. 매번 이전 렌더링을 추적하지 못하게 됩니다.

4. useRef() 후크 사용

이제 useRef()를 사용하여 이를 구현해 보겠습니다.

우리 대부분이 알고 있듯이 useRef는 돔 내부 요소를 참조하고 수동으로 조작하는 후크이지만 useRef는 이에 국한되지 않습니다. 또한 값을 보유할 수 있으며 구성 요소 렌더링 수명 주기 전반에 걸쳐 변수를 지속성으로 유지하는 데 사용할 수 있습니다.

useRef 내부에 값을 저장하면 React 구성 요소 렌더링 수명 주기의 영향을 받지 않으며, 재렌더링 횟수에 관계없이 값이 지속됩니다. 구현은 다음과 같습니다.

import { useState } from "react";

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

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

numberOfTimesRendered.current는 참조 변수 내에 저장된 현재 값을 제공합니다. 이 접근 방식은 추가 재렌더링을 발생시키지 않으며 최고라고는 말할 수 없지만 제가 아는 한 가장 최적의 접근 방식 중 하나입니다.

---

이 글을 마치겠습니다. 피드백을 받고자 하며 추가 설명이 필요한 경우 아래에 의견을 남겨주시면 최선을 다해 도와드리겠습니다.

X와 LinkedIn에서 저와 소통하세요!?✨

위 내용은 useRef()를 사용하여 구성 요소가 렌더링된 횟수 추적 - React의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!