React 베타버전의 문서를 일부 번역하여 작성하였습니다.
어떤 정보를 기억해야하지만 컴포넌트의 새로운 렌더링을 원하지 않은때 ref 를 사용할 수 있다고합니다.
Adding a ref to your component
ref를 사용하기 위해서는 useRef 훅을 import 하여 사용할 수 있으며, 컴포넌트 안에 useRef 를 호출 시킬수 있으며, 하나의 argument만을 사용하여야 합니다.
import { useRef } from 'react'; useRef 는 아래 예시의 object와 같은 값을 리턴 시킬 수도 있습니다.
{
current : 0 //The value you passed to useRef
}ref.current 프로퍼티를 통해 current value에 접근을 할 수 있으며, 해당 값은 변경이 가능하며 읽고 쓸 수 있습니다. 아래의 코드와 같이 ref.current를 통해 버튼클릭시 마다 카운트를 할 수도 있습니다.
import { useRef } from 'react';
export default function Counter() {
let ref = useRef(0);
function handleClick() {
ref.current = ref.current + 1;
alert('You clicked ' + ref.current + ' times!');
}
return (
<button onClick={handleClick}>
Click me!
</button>
);
}ref는 숫자를 가리키지만 state와 마찬가지로 문자열, 객체, 함수 역시 가리킬 수 있습니다. State와는 달리 ref는 읽고 수정할 수 있는 현재 속성이 있는 일반 JavaScript 객체입니다. 또한 구성 요소는 증가하거나 감소 할때 마다 다시 렌더링되지 않습니다.
Differences between refs and state
예를 들어 항상 상태 설정 기능을 사용하는 대신 ref를 변경할 수 있으나 대부분의 경우 state를 사용하게 되기는 합니다. ref는 자주 필요하지 않은 “esacpe hatch"입니다. state와 ref의 차이는 아래와 같습니다.
state를 사용하여 counter 버튼을 만들때는 아래와 같이 구성할 수 있습니다.
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<button onClick={handleClick}>
You clicked {count} times
</button>
);
}count의 값이 표시되기 때문에 state 값을 사용하는 것이 좋습니다. count 값이 setCount()로 설정되면 React는 구성 요소를 다시 렌더링하고 화면은 다시 개수를 반영하도록 업데이트됩니다.
이것을 ref로 구현하려고 시도하면 React는 구성 요소를 다시 렌더링하지 않으므로 count 변경에 따른 값을 볼 수 없습니다. 렌더링 중에 ref.current를 읽으면 신뢰할 수 없는 코드로 이어지는 이유입니다.
useState와 useRef 모두 React에서 제공하지만 원칙적으로 useState 위에 useRef를 구현할 수 있습니다. React 내부에서 useRef가 다음과 같이 구현되어 있다고 상상할 수 있습니다.
// Inside of React
function useRef(initialValue) {
const [ref, unused] = useState({ current: initialValue });
return ref;
}첫 번째 렌더링 중에 useRef는 { current: initialValue }를 반환합니다. 이 객체는 React에 의해 저장되므로 다음 렌더링 중에 동일한 객체가 반환됩니다. 위의 예제에서 상태 설정자가 사용되지 않는 방법에 유의하십시오. useRef는 항상 동일한 객체를 반환해야 하기 때문에 불필요합니다.
일반적으로 구성 요소가 React "밖으로 나가서" 외부 API(종종 구성 요소의 모양에 영향을 미치지 않는 브라우저 API)와 통신해야 할 때 ref를 사용합니다.
- Storing timeout IDs
- Storing and manipulating DOM elements, which we cover on the next page
- Storing other objects that aren’t necessary to calculate the JSX.
Recap
ref는 렌더링에 사용되지 않는 값을 유지하기 위한 escape hatch로서 자주 사용되지는 않습니다. ref는 읽거나 설정할 수 있는 current라는 단일 속성이 있는 일반 JavaScript 객체이며, useRef Hook을 호출하여 React에 ref를 제공하도록 요청할 수 있습니다. 또한 state와 마찬가지로 ref를 사용하면 구성 요소를 다시 렌더링하는 사이에 정보를 유지할 수 있습니다. 반면 state와 달리 ref의 현재 값을 설정해도 다시 렌더링이 트리거되지 않습니다. 또한 렌더링하는 동안 ref.current를 읽거나 쓰게되면 구성 요소를 예측하기 어렵게 만듭니다.
