React useRef Hook을 사용한 마스터 DOM 조작 및 성능

React 사용 이해Ref Hook: 0에서 영웅으로

소개

React로 애플리케이션을 구축할 때 개발자가 직면하는 주요 과제 중 하나는 구성 요소 상태와 성능을 관리하는 것입니다. React의 useState 후크는 상태 관리에 널리 사용되지만 때로는 불필요한 재렌더링이 발생할 수 있습니다. 여기서 useRef 후크가 매우 중요해집니다. 이를 통해 DOM과 직접 상호 작용하고, 변경 사항을 추적하고, 구성 요소를 다시 렌더링하지 않고도 값을 저장할 수 있습니다.

이 가이드에서는 useRef 후크의 목적, 이점 및 일반적인 사용 사례를 다루면서 단계별로 살펴보겠습니다. 결국에는 초보자라도 자신감 있게 useRef를 구현하여 React 애플리케이션의 다양한 문제를 해결할 수 있을 것입니다.

React useRef Hook이란 무엇입니까?

useRef 후크는 React의 핵심 후크 API의 일부입니다. 원하는 값을 저장하는 데 사용할 수 있는 .current 속성이 있는 변경 가능한 객체를 반환합니다. 상태와 달리 .current 값을 변경해도 구성 요소가 다시 렌더링되지 않습니다.

useRef의 간단한 구문은 다음과 같습니다.

const myRef = useRef(initialValue);

• initialValue: useRef 객체의 초기 값입니다.
• myRef.current: 참조 값을 저장하는 속성입니다.

왜 useRef를 사용하나요?

• 불필요한 재렌더링 방지: 상태 변경은 React에서 재렌더링을 유발하지만, useRef를 사용하면 업데이트 없이 렌더 간에 값을 유지할 수 있습니다.
• DOM 요소 액세스: 입력 필드에 초점을 맞추는 등 기본 DOM 요소와 상호작용해야 하는 경우가 많습니다. useRef는 이를 수행하는 효율적인 방법을 제공합니다.
• 상태 변경 추적: 이전 상태와 같은 값이나 렌더링 전반에 걸쳐 지속되는 렌더링 횟수를 추적할 수 있습니다.

문제: React State로 인해 불필요한 재렌더링이 발생함

React에서는 상태 변경이 다시 렌더링을 유발합니다. 성능이 중요한 애플리케이션의 경우 과도하게 다시 렌더링하면 앱 속도가 느려질 수 있습니다. 예를 들어보겠습니다.

문제 예: 재렌더링을 유발하는 상태

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

이 예에서는 개수와 같은 특정 데이터 업데이트에만 관심이 있더라도 버튼을 클릭하면 전체 구성 요소가 다시 렌더링됩니다.

해결 방법: useRef를 사용하여 재렌더링 방지

useRef를 사용하면 불필요한 재렌더링을 발생시키지 않고 값을 저장할 수 있습니다.

문제 해결을 위한 참조 예

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

이 예에서는 useRef가 변경될 때 React가 다시 렌더링하지 않기 때문에 다시 렌더링을 트리거하지 않고 countRef.current를 증가시킵니다.

useRef를 사용하여 DOM 요소에 액세스

React의 선언적 특성은 직접적인 DOM 조작을 추상화합니다. 그러나 입력 필드에 초점을 맞추거나 특정 섹션으로 스크롤하는 등 DOM 요소에 직접 액세스해야 하는 경우가 있습니다. 이것이 바로 useRef가 구출되는 곳입니다.

예: 입력 필드에 초점 맞추기

const myRef = useRef(initialValue);

이 예에서는 입력 필드의 ref 속성에 inputRef를 할당합니다. 버튼을 클릭하면 handlerFocus 함수가 호출되므로 inputRef.current.focus()를 사용하여 프로그래밍 방식으로 입력 필드에 초점을 맞출 수 있습니다.

다시 렌더링하지 않고 상태 변경 추적

재렌더링을 실행하지 않고 시간 경과에 따른 값을 추적해야 하는 경우도 있습니다. 일반적인 사용 사례는 변수의 이전 상태를 추적하는 것입니다.

예: useRef를 사용하여 이전 상태 추적

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

이 예에서는 useRef를 사용하여 이전 값을 저장합니다. 구성 요소는 현재 값으로 렌더링되지만 이전 값은 prevValueRef.current에 저장되며 다시 렌더링을 트리거하지 않습니다.

useRef가 다시 렌더링을 유발하나요?

아니요. useRef 객체를 수정해도 다시 렌더링되지 않습니다. 이러한 동작으로 인해 useRef는 렌더링 전반에 걸쳐 지속되어야 하지만 렌더링 논리의 일부로 사용하고 싶지 않은 값을 저장하는 데 적합합니다.

예: useRef 변경 시 다시 렌더링하지 않음

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

이 예에서는 다시 렌더링할 때마다 renderCountRef.current를 변경하더라도 추가로 다시 렌더링이 발생하지 않습니다.

고급 예: 클릭 이벤트 추적을 위한 useRef

다시 렌더링하지 않고 버튼을 클릭한 횟수를 계산하는 고급 예제를 만들어 보겠습니다.

const FocusInput = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref="{inputRef}" type="text">
      <button onclick="{handleFocus}">Focus Input</button>
    </div>
  );
};

이 경우 버튼의 클릭 횟수는 clickCountRef.current를 통해 추적되지만 React는 구성 요소를 다시 렌더링하지 않습니다.

useRef의 일반적인 실수

Ref 초기화를 잊어버린 경우

항상 값이나 null로 참조를 초기화하는 것을 잊지 마세요.

const PreviousStateExample = ({ value }) => {
  const prevValueRef = useRef();

  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  const prevValue = prevValueRef.current;

  return (
    <div>
      <p>Current Value: {value}</p>
      <p>Previous Value: {prevValue}</p>
    </div>
  );
};

useRef를 사용하여 구성 요소 상태 저장

useRef를 useState 대신 사용하지 마세요. useRef는 렌더링에 영향을 주지 않는 값에만 사용해야 합니다. 값이 구성 요소의 표시에 영향을 미치는 경우 useState를 사용하세요.

const NoRenderOnRefChange = () => {
  const renderCountRef = useRef(0);

  useEffect(() => {
    renderCountRef.current += 1;
    console.log("Component re-rendered:", renderCountRef.current);
  });

  return <p>Check the console for render count</p>;
};

자주 묻는 질문(FAQ)

1. 언제 useState 대신 useRef를 사용해야 합니까?

다시 렌더링을 트리거하지 않고 변경 가능한 값을 저장해야 하는 경우 useRef를 사용하세요. UI에 영향을 미치는 값의 경우 useState를 사용하세요.

2. 이전 상태를 저장하기 위해 useRef를 사용할 수 있나요?

예, useRef를 사용하면 다시 렌더링을 트리거하지 않고 이전 값을 저장할 수 있지만 useEffect에서 참조를 업데이트하는 것을 잊지 마세요.

3. useRef를 수정하면 다시 렌더링이 발생합니까?

아니요. useRef.current를 수정해도 다시 렌더링되지 않습니다. 그렇기 때문에 불필요한 업데이트를 피하고 싶은 시나리오에 이상적입니다.

4. useRef를 사용하여 DOM 요소에 어떻게 액세스합니까?

DOM 요소의 ref 속성에 useRef를 할당하면 ref.current를 통해 DOM 요소에 액세스할 수 있습니다.

결론

useRef 후크는 개발자가 값을 저장하고, 이전 상태를 추적하고, 다시 렌더링하지 않고도 DOM 요소와 상호 작용할 수 있게 해주는 React의 다재다능하고 강력한 도구입니다. 클릭 수 관리부터 입력 집중까지 useRef는 성능을 최적화하고 더욱 깨끗하고 효율적인 솔루션을 제공할 수 있는 기회를 열어줍니다. 이 가이드를 통해 이제 초급 사용 사례부터 고급 애플리케이션까지 다양한 시나리오에서 useRef를 구현하는 방법에 대한 지식을 갖게 되었습니다.

위 내용은 React useRef Hook을 사용한 마스터 DOM 조작 및 성능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!