useRef()

1. 언제 사용할까?

• useRef()는 실제 DOM 노드를 참조 하여 참조 대상을 변경할 때 사용한다. .current 속성에 참조된 요소가 담겨있기 때문에 이 속성을 사용해서 요소에 접근하면 된다.

• 이전의 상태 값을 기억하여 이전 값과 이후 값을 비교할 때 사용한다. →JS의 클로저 기능을 리액트에서 사용하고 싶을 때 사용한다.

2. 용도

2.1 상태를 기억

useRef()는 .current 속성에 변경 가능한 값을 담고 있는 “상자”와 같다.

const refContainer = useRef(initialValue);

클로저와 같이 이전의 값을 기억한다.

위의 이미지 코드는 이해를 돕기 위한 이미지이다. 실제로 작동하지 않는다.

2.2 DOM 객체 참조

예를 들어서 아래의 코드 처럼 이미 마운트 된 요소를 변경하고 싶은 경우 Ref 참조를 사용해서 변경한다.

이전에는 명령형(querySelector)으로 DOM요소에 접근했으나 이 방법은 React에서 지향하는 선언형 방법이 아니다. 그렇기 때문에 useRef() 속성을 사용해서 선언형으로 요소에 접근하는 것을 권장한다.

const HannaButton = ({ ...props }) => {
  return <button {...props} type="button" />;
};

export default function App() {
  const paraRef = React.useRef(null);
  React.useEffect(() => {}, []);

  // 버튼 클릭시 p 요소의 글자 색상이 변경 된다. 
  const handleClick = () => {
    paraRef.current.style.color = "rgb(167 25 25)"
  };
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p ref={paraRef}>Start editing to see some magic happen :)</p>
      <HannaButton onClick={handleClick}>change color</HannaButton>
    </div>
  );
}

Ref 객체를 사용해서 리스트의 특정 요소에 접근하기

3. useState vs useRef

구분	설명
useState	이전 상태를 기억한다. 상태가 업데이트 되면 컴포넌트를 다시 렌더링한다. 즉, 이전 값을 기억하고 상태 업데이트도 필요할 때 사용한다. 예) count와 같이 상태가 계속 업데이트 되어 리렌더링이 필요할 때 사용
useRef	이전 상태를 기억한다. 상태가 업데이트 된다고 해도 컴포넌트를 다시 렌더링 하지 않는다. 이전 값을 기억하고 싶지만 업데이트는 필요하지 않을 때 사용한다. 예) 아코디언의 open/close와 같이 이전 상태를 기억해야 하지만 업데이트는 필요하지 않을 때 사용.