useRef vs global Variable

useRef vs Variable

리액트에서 변경이 필요한 값 즉, 상태값이 아닌 변수가 필요한 경우에 let, var를 사용하여 변수를 선언하는 것이 아니라 useRef를 사용하곤 한다.

왜 let을 사용하지 않고 useRef를 사용할까? 그 의구심이 들었다.

우선 variabel 이라고 하면은 두가지 경우가 있다.

local Variable
global Variable

여기서 말하는 local Variable은 컴포넌트 내부 변수를 말한다. 이 경우에는 컴포넌트가 리렌더링시 초기화되기 때문에(당연한…) 사용할 수가 없다.

컴포넌트 밖에서 선언하는 global variable를 써도 되는 거 아닌가 하는 생각이 들었고 그 이유를 찾아보고 이해한 바를 적어보려고한다.

state가 변경될 때 마다 effect를 위한 useEffect를 사용하는 경우를 예를 들어보겠다.
state가 변경될 때마다 useEffect가 작동하겠지만, 첫 렌더링이 될 때에도 작동한다. 그걸 원하지 않아서 firstTime 이라는 변수로 첫 렌더링을 판별하는 방법을 쓸 수 있다.

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

const Component = () => {
  const [state, setState] = useState(0);
  const firstTime = useRef(true);

  useEffect(() => {
    if (!firstTime.current) {
      // Run the effect.
    } else {
      firstTime.current = false;
    }
  }, [state]);

  return <div></div>;
};

export default Component;

firtTime을 useRef가 아닌 let을 사용한 변수로 사용할 수도 있다.

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

let firstTime = true;

const Component = () => {
  const [state, setState] = useState(0);

  useEffect(() => {
    if (!firstTime) {
      // Run the effect.
    } else {
      firstTime = false;
    }
  }, [state]);
  return <div></div>;
};

export default Component;

만약 컴포넌트가 싱글톤일 경우에는 위 두 경우의 효과는 동일하다. 하지만 컴포넌트가 여러번 사용되어 지는 multiple instance의 경우 문제가 생길 수 있다.

global variable이 공유되어지기 때문이다.!!
그래서 useRef를 사용한다.