React&#s useRef Hook 익히기: DOM 및 가변 값 작업

React의 useRef Hook

useRef 후크는 다시 렌더링하지 않고 렌더링 전반에 걸쳐 값을 유지하는 데 사용되는 내장 React 후크입니다. DOM 요소와 직접 상호작용하고 렌더링 간에 유지되어야 하지만 반드시 다시 렌더링을 트리거할 필요는 없는 값을 저장하는 데 자주 사용됩니다.

---

useRef란 무엇인가요?

useRef 후크는 주로 두 가지 목적으로 사용됩니다.

1. DOM 요소 액세스: DOM 노드 또는 React 요소를 직접 참조하는 방법을 제공하여 명령적으로 상호 작용할 수 있습니다.
2. 렌더링 전반에 걸쳐 값 유지: 상태와 달리 업데이트 시 다시 렌더링을 트리거하지 않는 변경 가능한 값을 저장할 수 있습니다.

---

useRef 구문

const myRef = useRef(initialValue);

• myRef: useRef에 의해 생성된 참조 객체
• initialValue: 참조 객체에 저장될 초기 값입니다. 이는 DOM 노드, 객체 또는 기본 값 등 무엇이든 될 수 있습니다.

useRef가 반환한 참조 객체에는 실제 값이 저장되는 현재 속성이 있습니다.

---

useRef 작동 방식

1. DOM 요소 액세스: 클래스 구성 요소의 ref 속성과 마찬가지로 useRef를 사용하면 기능 구성 요소의 DOM 요소에 직접 액세스할 수 있습니다.

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

     const focusInput = () => {
       // Access the DOM node and focus it
       inputRef.current.focus();
     };

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

• 여기서 inputRef는 버튼을 클릭하면 focusInput 함수는 해당 입력 요소에 초점을 맞춥니다.

1. 렌더링 전반에 걸쳐 변경 가능한 값 저장: useRef를 사용하면 렌더링 전반에 걸쳐 지속되지만 변경 시 다시 렌더링을 트리거하지 않는 값을 저장할 수 있습니다.

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

     const increment = () => {
       countRef.current++;
       console.log(countRef.current);  // This will log the updated value
     };

     return (
       <div>
         <p>Current count (does not trigger re-render): {countRef.current}</p>
         <button onclick="{increment}">Increment</button>
       </div>
     );
   };

• 이 예에서 countRef는 변경 가능한 값을 저장합니다. 재렌더링을 트리거하는 useState와 달리 재렌더링을 발생시키지 않고 값을 업데이트할 수 있습니다.

---

일반적인 사용 사례참고

1. DOM 요소 액세스: 예를 들어 입력 필드에 초점을 맞추거나 특정 요소로 스크롤하거나 요소의 크기를 측정합니다.

   const ScrollToTop = () => {
     const topRef = useRef(null);

     const scrollToTop = () => {
       topRef.current.scrollIntoView({ behavior: 'smooth' });
     };

     return (
       <div>
         <div ref="{topRef}">



<ol>
<li>
<strong>Storing Previous State</strong>: If you need to track the previous value of a prop or state value.
</li>
</ol>

<pre class="brush:php;toolbar:false">   const PreviousState = ({ count }) => {
     const prevCountRef = useRef();

     useEffect(() => {
       prevCountRef.current = count; // Store the current value in the ref
     }, [count]);

     return (
       <div>
         <p>Current Count: {count}</p>
         <p>Previous Count: {prevCountRef.current}</p>
       </div>
     );
   };

• 설명: prevCountRef는 다시 렌더링을 트리거하지 않고도 액세스할 수 있는 count의 이전 값을 저장합니다.

1. 복잡한 값에 대한 재렌더링 방지: 재렌더링을 트리거할 필요가 없는 큰 개체나 복잡한 데이터 구조가 있는 경우 useRef는 구성 요소의 값에 영향을 주지 않고 이를 저장할 수 있습니다. 공연.

2. 추적 간격 또는 시간 초과: 시간 초과 또는 간격의 ID를 저장하여 나중에 지울 수 있습니다.
   

const myRef = useRef(initialValue);

• 설명: IntervalRef는 간격의 ID를 저장하며 구성 요소가 마운트 해제될 때 간격을 지우는 데 사용할 수 있습니다.

---

useRef와 useState의 주요 차이점

기능 사용Ref 사용 상태

Feature	useRef	useState
Triggers re-render	No (does not trigger a re-render)	Yes (triggers a re-render when state changes)
Use Case	Storing mutable values or DOM references	Storing state that affects rendering
Value storage	Stored in current property	Stored in state variable
Persistence across renders	Yes (keeps value across renders without triggering re-render)	Yes (but triggers re-render when updated)

재렌더링 트리거 아니요(다시 렌더링을 실행하지 않음) 예(상태가 변경되면 다시 렌더링 트리거) 사용 사례 변경 가능한 값 또는 DOM 참조 저장 렌더링에 영향을 미치는 상태 저장 가치 저장 현재 속성에 저장됨 상태 변수에 저장됨 렌더링 전반에 걸친 지속성 예(다시 렌더링을 트리거하지 않고 렌더링 전반에 걸쳐 가치 유지) 예(그러나 업데이트되면 다시 렌더링을 트리거함)

---

예: 양식 유효성 검사에 useRef 사용

다음은 유효하지 않은 입력 필드에 초점을 맞춰 양식 유효성 검사에 useRef를 사용하는 예입니다.

'react'에서 React, { useRef, useState }를 가져옵니다.

const FormComponent = () => {
  const inputRef = useRef();
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState('');

  const verifyInput = () => {
    if (inputValue === '') {
      setError('입력값은 비워둘 수 없습니다.');
      inputRef.current.focus(); // 입력 요소에 초점을 맞춥니다.
    } 또 다른 {
      setError('');
    }
  };

  반품 (
    <div>
       setInputValue(e.target.value)}
      />
      {오류 && <p>



</p>
<ul>
<li>
<strong>설명</strong>: 

<ul>
<li>inputRef는 입력 값이 비어 있는 경우 입력 요소에 초점을 맞추는 데 사용됩니다.</li>
<li>이 기능은 useState에서는 불가능합니다. DOM 요소에 초점을 맞추려면 useState가 제공할 수 없는 요소에 직접 액세스해야 하기 때문입니다.</li>
</ul>


</li>

</ul>


<hr>

<h3>
  
  
  <strong>사용요약Ref Hook</strong>
</h3>

<ul>
<li>
<strong>useRef</strong>는 업데이트 시 다시 렌더링을 트리거하지 않는 DOM 요소 및 변경 가능한 값에 대한 참조를 저장하는 데 사용됩니다.</li>
<li>DOM 노드에 직접 액세스하는 데 유용합니다(예: 초점 맞추기, 스크롤 또는 애니메이션).</li>
<li>
<strong>useRef</strong>는 이전 값을 추적하거나 시간 초과/간격 ID를 저장하는 등 다시 렌더링을 트리거할 필요 없이 렌더링 전반에 걸쳐 지속되는 값을 저장하는 데에도 유용합니다.</li>
<li>
<strong>주요 차이점</strong>: useState와 달리 useRef를 업데이트해도 다시 렌더링이 실행되지 않습니다.</li>
</ul>


<hr>

<h3>
  
  
  <strong>결론</strong>
</h3>

<p><strong>useRef</strong> 후크는 React에서 변경 가능한 값과 직접적인 DOM 조작을 처리하는 데 매우 유용합니다. 양식 요소로 작업하든, 이전 상태를 추적하든, 타사 라이브러리와 상호작용하든, useRef는 깔끔하고 효율적인 솔루션을 제공합니다. useRef를 사용하면 불필요한 재렌더링을 트리거하지 않고 지속성을 유지할 수 있으므로 성능에 민감한 작업에 탁월한 선택입니다.</p>


<hr>


          </div>