여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. React - Hooks - useRef 훅
React – Hooks – useRef 훅
10개월전 작성
10개월전 수정

React

useRef

Ref 훅을 사용하면 렌더링 사이의 값을 지속할 수 있다.

업데이트 시 재렌더가 발생하지 않는 변경 가능한 값을 저장하는 데 사용할 수 있다.

DOM 요소에 직접 액세스하는 데 사용할 수 있다.

재렌더를 발생시키지 않음

useState 훅을 사용하여 애플리케이션을 렌더링하는 횟수를 세려고 하면 이 훅 자체가 재렌더링을 유발하기 때문에 무한 루프에 걸릴 수 있다.

이를 방지하기 위해 useRef 훅을 사용할 수 있다.

예제

useRef를 사용하여 응용프로그램 렌더링을 추적한다.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
기본 예시
예제 보기

 

useRef()는 하나의 항목만 반환합니다. 현재라는 Object를 반환한다.

useRef 초기화 시 초기값을 설정한다: useRef(0).

⭐ 이런 식으로 count.count = {current: 0}을(를) 사용하여 count.current를 사용하여 count에 액세스할 수 있다.

컴퓨터에서 이것을 실행하고 입력을 입력하여 응용 프로그램 렌더 횟수가 증가하는지 확인한다.

DOM 요소 액세스

일반적으로 React가 모든 DOM 조작을 처리하도록 하고 싶다.

하지만 useRef를 문제없이 사용할 수 있는 경우가 있다.

React에서 요소에 ref 속성을 추가하여 DOM에서 직접 액세스할 수 있다.

예제

useRef를 사용하여 입력에 초점을 맞춘다.

import { useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
기본 예시
예제 보기

추적 상태 변경 사항

useRef 훅을 사용하여 이전 상태 값을 추적할 수도 있다.

렌더링 간에 useRef 값을 유지할 수 있기 때문이다.

예제

이전 상태 값을 추적하려면 ‘useRef’를 사용한다.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
기본 예시
예제 보기

 

이번에는 useState, useEffect 및 useRef를 조합하여 이전 상태를 추적한다.

useEffect에서는 입력 필드에 텍스트를 입력하여 inputValue가 업데이트될 때마다 useRefcurrent 값을 업데이트하고 있다.

참고

Mingg`s Diary
밍구
밍구
공부 목적 블로그