Ref로 값 참조하기

개념

컴포넌트가 정보를 기억하지만 렌더링을 유발하지 않게 하고 싶다면 사용하는 Hook

사용법

import { useRef } from 'react';

const ref = useRef(0);

반환 객체

{
	current: 0
}

ref.current 프로퍼티를 통해 ref의 current값에 접근할 수 있음.

state와 ref의 차이

refs	state
useRef(initialValue) 는 { current: initialValue } 을 반환합니다.	useState(initialValue) 은 state 변수의 현재 값과 setter 함수 [value, setValue] 를 반환합니다.
state를 바꿔도 리렌더 되지 않습니다.	state를 바꾸면 리렌더 됩니다.
Mutable-렌더링 프로세스 외부에서 current 값을 수정 및 업데이트할 수 있습니다.	”Immutable”—state 를 수정하기 위해서는 state 설정 함수를 반드시 사용하여 리렌더 대기열에 넣어야 합니다.
렌더링 중에는 current 값을 읽거나 쓰면 안 됩니다.	언제든지 state를 읽을 수 있습니다. 그러나 각 렌더마다 변경되지 않는 자체적인 state의 snapshot이 있습니다.

렌더링이 필요한 상황에서는 state를 써야하고, 아니면 ref를 써야합니다.

ref를 사용할 상황

일반적으로 컴포넌트가 React를 “외부”와 외부 API—컴포넌트의 형태에 영향을 미치지 않는 브라우저 API 와 통신해야 할 때 ref를 사용합니다. 다음은 몇 가지 특별한 상황입니다.

• timeout IDs를 저장
• 다음 페이지에서 다루는 DOM 엘리먼트 저장 및 조작
• JSX를 계산하는 데 필요하지 않은 다른 객체 저장

컴포넌트가 일부 값을 저장해야 하지만 렌더링 로직에 영향을 미치지 않는 경우, refs를 선택합니다.

요약

• Refs는 렌더링에 사용되지 않는 값을 고정하기 위한 탈출구이며, 자주 필요하지는 않습니다.
• ref는 읽거나 설정할 수 있는 current라는 프로퍼티를 호출할 수 있는 자바스크립트 순수객체입니다.
• useRef Hook을 호출해 ref를 달라고 React에 요청할 수 있습니다.
• state와 마찬가지로 ref는 컴포넌트의 렌더링 간에 정보를 유지할 수 있습니다.
• state와 달리 ref의 current 값을 설정하면 리렌더가 트리거되지 않습니다.
• 렌더링 중에 ref.current를 읽거나 쓰지 마세요. 컴포넌트를 예측하기 어렵게 만듭니다.

출처

https://ko.react.dev/learn/referencing-values-with-refs