[비공개] 근본 면접에서도 물어봄 리액트에서 ref와 state의 차이점은 무엇인가?

https://nukw0n-dev.tistory.com/14

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

 

잘 정리해놓음

 

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의 이전 값
• 이 외 렌더링과 무관한 가변값

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

 

 

 

---다른 포스팅

 

회사에서 선배가 작성한 코드를 감히 나 따위가 리뷰..는 아니고 그냥 조용히 읽어보는데 useRef Hook을 다소 특이하게 쓴 것을 발견했다.

const test = useRef({name: 'Dog', value: 'foot'});

이걸 보기 전까지 나에게 useRef는 하위컴포넌트에 ref 쓰고 싶을 때 forwardRef랑 조합해서만 쓰는 훅이었는데..!
이렇게 useState처럼 값을 저장할 때도 쓴다고? 하고 한번 놀랐고
어, 그러면 useState랑 뭐가 다른거지? 하고 찾아봤다가 이 주제와 관련된 수많은 포스팅들이 있는 것을 발견하고 아 나는 아직 갈 길이 한참 멀었구나 하고 반성했다...

아무튼 차이를 결론만 말하자면,

• useState는 state의 값이 달라질 때마다 컴포넌트가 리렌더된다.
• useRef는 ref 값이 변한다고 컴포넌트가 리렌더되지 않는다.

이 차이를 제대로 이해하기 위해서,
수많은 포스팅들에서 공통적으로 많이 사용한 1초마다 화면에 보이는 count가 증가하고, 그 컴포넌트가 unmount될 때 현재의 count가 alert되는 예시 코드를 직접 짜보면서 테스트 및 비교해봤다.