[react] useRef

useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook이다

const ref = useRef(initialValue)

• initialValue: ref객체의 초기값.
• return: current를 가진 객체
  • current: 처음에는 initialValue로 설정된다. ref객체를 JSX노드의 ref 속성으로 설정하면 React는 current를 설정한다. 렌더링 할때만다 useRef는 동일한 객체를 반환한다.

용법

값 참조

function Stopwatch() {
	const intervalRef = useRef(0);

ref는 state와 비슷하지만 ref는 변경되더라도 렌더링을 발생시키지 않는다. → ref는 시각적 출력에 영향을 미치지 않는 정보를 저장하는데 적합하다. 반대로 화면에 표시되는 정보를 저장하는데는 적합하지 않다.

ref가 보장하는 것.

• 렌더링 사이에 정보를 저장할 수 있다.
• 변경되어도 렌더링을 발생시키지 않는다.
• 컴포넌트에 로컬로 저장된다.

렌더링 중에는 ref.current를 쓰거나 읽으면 안된다.

function MyComponent() {
	const myRef1 = useRef()
	const myRef2 = useRef()
	
	myRef1.current = 123
	
	return (
		<div>
			{myRef2.current}
		</div>
	)
}

이벤트 핸들러, useEffect를 사용하거나, 렌더링중에 읽거나 써야하는경우 useState를 사용해야 한다.

function MyComponent() {
	const myRef1 = useRef()
	const myState = useState()
	
	useEffect(()=> {
		myRef1 = 123
	})
	
	return (
		<div>
			{myRef2.current}
		</div>
	)

ref로 DOM 조작

function MyComponent() {
	const inputRef = useRef(null);
	
	return <input ref={inputRef} />
}

초기값이 null인 ref를 JSX의 ref속성을 설정하면, react가 current 속성을 DOM 노드로 설정한다.

function handle.Click() {
	inputRef.current.focus();
}

위와 같이 DOM node <input/> 에 접근해서 메서드를 호출할 수 있다.

컨텐츠 재생성 회피

ref는 최초 렌더링시에 값을 한번만 생성하고 다음부터는 무시한다.

const playerRef = useRef(new VideoPlayer());

최초 렌더링시 VideoPlayer 객체가 생성되고 playRef에 저장되지만, 렌더링 마다 계속해서 playRef에 저장된다.

const playerRef = useref(null)
if (playerRef.current === null) {
	playerRef.current = new VideoPlayer();
}