220324 useRef

• 자바스크립트에서는 특정 DOM을 선택해야 할 때,
  getElementById나 querySelector같은 DOM Select 함수를 사용해서 DOM을 선택한다
• 일반적으로 애플리케이션 대부분의 컴포넌트에서
  DOM을 다루는 것은 권장되지 않는다
• 그럼에도 DOM을 직접 선택해야하는 상황이 생기는데 이럴 때 리액트에선 ref를 사용

useRef

const ref = useRef(initialValue);

• 우선 ref는 reference의 줄임말이자, 참조라는 뜻이다
• DOM 요소를 참조한다는 의미에서 useRef가 아닐까 생각한다
• useRef는 변화는 감지해야 하지만,
  그 변화가 렌더링을 일으키면 안되는 값을 다룰 때 유용하다

useRef의 기능

1. 특정 DOM을 선택할 수 있는 기능을 지녔다
2. 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것
   • useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않는다
   • 또한 useRef 함수는 current라는 속성을 지닌 객체를 반환하는데,
     이 current 속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트의 랜더링을 유발하지 않으면서,
   • React 컴포넌트가 다시 랜더링 되어도 current 속성의 값은 변하지 않는다
     • 이 특징을 활용하면 일종의 저장공간으로도 활용이 가능하다

예시

import { useRef } from 'react';

function LogButtonClicks() {
  const countRef = useRef(0);
  
  const refCount = () => {
    countRef.current++;
    console.log(`Clicked ${countRef.current} times`);
  };

  console.log('render');

  return <button onClick={refCount}>Click me</button>;
}

• 버튼을 클릭하더라도, 리렌더링을 일으키지 않아서
  render 로그는 나타나지 않지만
• useRef의 current 값은 계속 증가하는 것을 알 수 있다.
  • refCount에서 나오는 log를 보면 알 수 있다

useRef의 장점

• 값이 아무리 바뀌어도 렌더링이 일어나지 않기 때문에,
  성능에서 좋다고 할 수 있다

참고

• https://www.youtube.com/watch?v=VxqZrL4FLz8
• https://genglog.me/blog/210507
• https://www.daleseo.com/react-hooks-use-ref/