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 값을 업데이트하고 있다.
참고
