useRef란

useRef는 React에서 제공하는 hook API이다.
공식 문서를 살펴보면, 이러한 설명을 볼 수 있다.

• The returned object will persist for the full lifetime of the component.
• This works because useRef() creates a plain JavaScript object.

useRef는 순수 Javascript 객체를 생성하며, 컴포넌트의 life cycle이 끝날 때까지 유지된다는 말이다.
처음 useRef를 접할 때는 생소했지만, 몇번 사용해보고 나니 이 말이 무슨 말인지 확연히 이해가 갔다.

어디서 쓰일까?

1) 특정 DOM을 선택하고 싶을 때

특정 요소에 접근해서 속성을 바꾸거나, 이벤트를 걸고 싶을 때가 있다.
순수Javascript로 개발시에는 특정 요소에 접근 시, 이렇게 접근한다.

const cardEl = document.querySelector(".card");
cardEl.style.color = '#fff'; // 색상 변경

React에서는 특정 요소에 접근 시, 이렇게 접근한다.

const cardRef = useRef<Card | null>(null);
cardRef.current.style.color = '#fff'; // 색상 변경
// ..
return (
	<div ref={cardRef}>card</div>  
)

2) 초기화를 원하지 않을 때

초기화를 하면 원하는 결과가 나오지 않을 때가 있다.
대표적으로 새로운 객체를 생성한 뒤, 내부의 값을 계속 사용해야 할 때 그렇다.

export class Item {
  constructor(public name: string, public price: number) {}

  discount(price: number) { // 할인
    this.price - price;
  }
  
  changeItemName(name: string) { // 이름 변경
    this.name = name;
  }
}

만약 이 Item을 하나만 이용하는 서비스가 있다면 useRef를 사용해볼 수 있다. (물론 custom hook이나 useState를 이용해도 되겠지만, 이 방식이 잘 어울리는 상황이 있다.)

const itemRef = useRef<Item | null>(null);
itemRef.current = new Item('book', 20000); // current객체에 'book'item 담기

item.current.discount(1000);

👉 꼭 current에 담아야 좋을까?

여기서 의문이 들 수도 있다.

const Card = () => {
  const item = new Item('book', 20000);
  
  return (
    	// ...
    )
};

이런식으로 생성해서 사용하면 안되는걸까? 그건 아니다.
current에 담는 이유는, React에서는 상태가 바뀔 때마다 컴포넌트가 다시 생성되는데, 컴포넌트 내부에 있는 선언된 변수들까지 다시 만들어지기 때문이다.
생성할 객체가 내부에서 기억하는 것이 없다면, ref를 이용하지 않아도 무방하다.