useRef로 특정 DOM 선택하기 / useState, useRef

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.

 

함수형 컴포넌트에서 ref를 사용할 때는 useRef 라는 Hook 함수를 사용한다. 

 

useState, useRef의 공통점

 

useState와 useRef의 기능상의 공통점은 함수형 컴포넌트에서 동적으로 상태 관리를 할 수 있게 해준다는 점입니다.

간단한 예시로, 버튼이 클릭 되었을때 주어진 state를 “Humanscape!” 라는 string으로 변환하는 동일한 프로그램을 useState와 useRef를 통해 아래와 같이 다르게 구현할 수 있습니다.

 

 

useState.jsx

import React, {useState} from 'react';

const Test = () => {
  const [letter, setLetter] = useState('');
  const onClick = () => {
    setLetter('Humanscape!');
  };

  return (
    <div>
      <button onClick={onClick}>Humanscape?</button>
      <b>{letter}</b>
    </div>
  );
};

export default Test;

useRef.jsx

import React, {useRef} from 'react';

const Test2 = () => {
  const letter = useRef('');

  const onClick = () => {
    letter.current = 'Humanscape!';
    console.log(letter.current);
  };
  
  return (
    <div>
      <button onClick={onClick}>Humanscape?</button>
    </div>
  );
};

export default Test2;

 

useState, useRef의 차이점

 

useRef를 사용한 구현에서 글씨를 화면에 띄우지 않은 것은 useState와는 다르게 useRef는 state를 변화시킨 후에 component를 re-render하지 않기 때문이다.

 

useState: state를 변화 시킨 후에 re-render를 한다.

useRef: state를 변화 시킨 후에 re-render를 하지 않는다. useref는 화면에는 영향을 주지 않는다.

 

따라서 useRef를 사용한 구현에서 state를 변화시키더라도 변화 후에 re-render가 되지 않아 initial value로 나타날 것이기 때문에 rendering을 할 수는 있지만 변화했다는 의미가 존재하지 않아 따로 화면에 띄우지 않은 것입니다.

반면, useState의 경우 선언한 state가 setter function에 의해 update될 경우, re-rendering process가 진행됩니다

 

출처:

https://medium.com/humanscape-tech/react-usestate-vs-useref-4c20713f7ef