[React.js] useRef와 useState의 용도와 차이

 

서론

리액트에서 ref와 state의 차이점은 무엇인가?

면접에서 위와 같은 질문을 받았다.

나는 ref 를 특정 DOM 엘리먼트를 가리키는 용도로만 사용해왔기에 이 질문의 의도를 파악하지 못했다.

본질적으로 사용용도가 다른데 어떤 차이점을 물어보는거지? 라고 생각했다.
면접이 끝난 뒤 계속 기억에 남아 이에 대해 찾아보았고 깨달은 바를 정리해보고자 한다.

---

useRef

• useRef 는 단순 DOM 엘리먼트를 지정하는데만 사용되지 않는다.
• useRef 를 통해 클래스의 멤버 변수와 비슷한 역할을 하게 만들 수 있다.
• state 와 달리 값의 변화에 의한 리렌더링이 발생하지 않는다.
• current 라는 속성을 통해 어느 값이든 보유할 수 있는 일종의 컨테이너 역할을 할 수 있다.

함수형 컴포넌트는 인스턴스로 생성되지 않는다. 즉, 컴포넌트의 고유한 값을 저장할 방법이 없어 useRef를 통해 일종의 멤버변수를 구현하는 것.

다음의 코드는 ref 를 사용하여 state의 이전 값 을 보관하는 prevMathScore 라는 변수를 만든 예제이다.

import React, { useState, useEffect, useRef } from "react";

function Score() {
  const [mathScore, setMathScore] = useState(40);
  const prevMathScore = useRef(40);

  useEffect(() => {
    prevMathScore.current = mathScore;
  }, [mathScore]);

  const result = prevMathScore.current < mathScore ? "올랐네요" : "개판이네요";

  return (
    <>
      <button onClick={() => setMathScore(mathScore + 20)}>시험보기</button>
      <span>{`성적이 ${result}! `}</span>
    </>
  );
}

---

요약해보자면,

1.

state는 컴포넌트의 생명 주기와 밀접한 연관이 있는 요소이므로 렌더링과 관련 없는 값을 저장하기에는 적합치 않다.

2.

ref는

• setTimeout, setInterval이 반환하는 ID 값
• state의 이전 값
• 이 외 렌더링과 무관한 가변값

위와 같이 렌더링과 관련이 없는 값을 저장하기에 적합하다.