useRef란?
렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 React Hook이라고 정의되어 있습니다.
용법(Usage)은 크게 3가지로 나누고 있습니다.
- ref를 이용한 값 참조
- ref를 사용하여 DOM 조작
- 참조 컨텐츠 재생성 방지
다른 hook과 마찬가지로 컴포넌트에 최상단에 useRef를 import합니다.
import { useRef } from 'react';
function MyComponent() {
const intervalRef = useRef(0);
const inputRef = useRef(null);
// ...매개변수
- initialValue: ref 객체의 초기에 지정하려는 값입니다. 어떤 타입의 값이든 가능합니다. 초기 렌더링후에는 무시됩니다.
반환값
useRef는 단일 속성(current)을 가진 객체를 반환합니다.
- current: 초기에 매개변수로 지정한 값이 설정됩니다. 나중에 다른 값으로 설정할 수 있습니다.
주의사항
- ref.current 값을 state와 다르게 변경이 가능합니다. 하지만 렌더링에 사용되는 객체를 포함하는 경우 변경하면 안됩니다.
- ref.current를 변경하면 React는 컴포넌트를 다시 렌더링 하지 않습니다. ref는 자바스크립트 객체이기 때문에 React는 언제 변경되는지 인식하지 못합니다.
- 초기화를 제외하고 렌더링중에 ref.current를 쓰거나(write) 읽으면 컴포넌트의 동작을 예측하지 못합니다.
Ref로 값 참조하기
import { useRef } from 'react';
function Stopwatch() {
const intervalRef = useRef(0);useRef는 기존에 사용자가 제공한 초기 값으로 설정된 current 속성을 가지는 객체를 반환합니다.
다음 렌더링 시에는 useRef는 동일한 객체를 반환합니다. 사용자는 current 속성을 변경하여 정보를 저장하고 나중에 읽을 수 있습니다. 상태(state)와 비슷하게 생각할 수 있지만 중요한 차이점이 있습니다.
참조를 변경해도 다시 렌더링이 발생하지 않습니다. 이는 참조가 컴포넌트의 시각적인 출력에 영향을 주지 않는 정보를 저장하는데 적합하다는 것을 의미합니다. 예를 들어 intervalId를 저장하고 나중에 값을 읽어 들어야 할 필요가 있는 경우 사용할 수 있습니다. 참조 내부의 값을 업데이트하려면 current 속성을 수동으로 변경해야 합니다.
function handleStartClick() {
const intervalId = setInterval(() => {
// ...
}, 1000);
intervalRef.current = intervalId;
}나중에 clearInveral를 호출하기 위해 참조에서 값을 읽을 수 있습니다.
function handleStopClick() {
const intervalId = intervalRef.current;
clearInterval(intervalId);
}ref를 사용하면 다음을 보장할 수 있습니다.
- 리렌더링 때마다 초기화 되는 정규 변수들과 다르게 정보(information)를 저장할 수 있습니다.
- 상태 변수와는 다르게 변경해도 다시 렌더링이 트리거되지 않습니다.
- 각 컴포넌트의 대해 따로 존재합니다.
함정(Pitfall)
렌더링 중에는 ref.curreent를 쓰거나 읽지 말아야 합니다.
React는 컴포넌트의 내부가 순수 함수처럼 동작할 것을 예상합니다.
- 입력(props, state 및 context)이 동일한 경우 정확히 동일한 JSX를 반환해야 합니다.
- 다른 순서나 다른 인수로 호출해도 다른 호출의 결과에 영향을 주어서는 안 됩니다.
렌더링 중에 참조를 읽거나 쓰면 이러한 기대가 깨집니다.
function MyComponent() {
// ...
// 🚩 Don't write a ref during rendering
myRef.current = 123;
// ...
// 🚩 Don't read a ref during rendering
return <h1>{myOtherRef.current}</h1>;
}대신 이벤트 헨들러나 useEffect에서 가능합니다.
function MyComponent() {
// ...
useEffect(() => {
// ✅ You can read or write refs in effects
myRef.current = 123;
});
// ...
function handleClick() {
// ✅ You can read or write refs in event handlers
doSomething(myOtherRef.current);
}
// ...
}렌더링 중에 무언가를 읽거나 써야 한다면 대신 상태(state)를 사용해야 합니다.
ref를 사용하여 DOM 조작
DOM을 조작하기 위해서 ref를 사용하는 것이 특히 일반적입니다.
먼저 초기 값이 null인 ref 객체를 선언합니다.
import { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
// ...그런 다음 조작하려는 DOM 노드의 JSX에 ref 속성으로 전달합니다.
return <input ref={inputRef} />;React가 DOM 노드를 생성하여 화면에 표시한 후 React는 ref 객체의 current 속성을 해당 DOM 노드로 설정합니다. 이제 input 의 DOM 노드에 액세스하고 focus()와 같은 메서드를 호출할 수 있습니다
function handleClick() {
inputRef.current.focus();
}React는 노드가 화면에서 제거되면 현재 속성을 다시 null로 설정합니다.
참조 콘텐츠 재생성 방지
React는 초기 참조 값을 한 번 저장하고 다음 렌더링에서는 이를 무시합니다.
function Video() {
const playerRef = useRef(new VideoPlayer());
// ...new VideoPlayer()의 결과는 초기 렌더링에만 사용되지만 여전히 모든 렌더링에서 이 함수를 호출합니다. 비용이 많이드는 객체를 생성한다면 이는 낭비일 수 있습니다.
이 문제를 해결하려면 대신 다음과 같이 참조를 초기화할 수 있습니다.
function Video() {
const playerRef = useRef(null);
if (playerRef.current === null) {
playerRef.current = new VideoPlayer();
}
// ...일반적으로 렌더링 중에는 ref.current를 쓰거나 읽는 것이 허용되지 않습니다. 하지만 이 경우에는 결과가 항상 동일하고 조건이 초기화 중에만 실행되므로 완전히 예측 가능하기 때문에 괜찮습니다.
참조 리액트 사이트
