"useState 와 useRef" 무엇이 더 효율적이고 올바른 방법일까?

출처: https://medium.com/@rdhamnaskar11/understanding-of-when-to-use-usestate-and-useref-hooks-6f7f60f79c82

 

 

useState 와 useRef 는 React 에서 상태를 관리하는 방법 중 하나다.

두 가지는 비슷해 보이지만, 사용 목적과 특징이 다르다.

 

 

1. useState

 React 컴포넌트에서 '상태'를 관리하기 위해 사용하는 Hook이다.

상태가 변하면 컴포넌트는 리렌더링되며, 그 결과를 사용자에게 보여준다.

이 경우, 상태가 변경될 때마다 컴포넌트가 리렌더링되어 사용자에게 최신 상태를 보여준다.

 

2. useRef

이 Hook은 컴포넌트의 '참조'를 관리하는 데 사용된다.

useRef를 사용하면 DOM 요소에 직접 접근할 수 있다.

useRef로 생성된 객체는 .current 프로퍼티를 가지고 있으며, 이는 변경 가능한 값으로 사용될 수 있다.

이 값은 변경되더라도 컴포넌트의 리렌더링을 일으키지 않는다.

따라서, input의 값이 변하더라도 이를 리렌더링하지 않고 싶을 때 useRef를 사용할 수 있다.

 

 

🚩 useState 를 사용한 input

import React, { useState } from 'react';

const StateExample = () => {
  const [stateInputValue, setStateInputValue] = useState('');

  const handleInputChange = (event) => {
    setStateInputValue(event.target.value);
  };

  return (
    <div>
      <label>
        Input :
        <input type="text" value={stateInputValue} onChange={handleInputChange} />
      </label>
      <p>
        Input Value: {stateInputValue}
      </p>
    </div>
  );
};

export default StateExample;

 

 

useState 를 사용하면, 당연하게도 Input의 상태 값이 바뀔 때마다 리렌더링이 이루어진다.

 

 

🚩 useRef 를 사용한 input

import React, { useRef } from 'react';

const RefExample = () => {
  const refInputValue = useRef('');

  const handleInputChange = (event) => {
    refInputValue.current = event.target.value;
  };

  return (
    <div>
      <label>
        Input using useRef:
        <input type="text" onChange={handleInputChange} />
      </label>
      <p>
        Current Input Value (using useRef): {refInputValue.current}
      </p>
    </div>
  );
};

export default RefExample;

useRef 는 리렌더링이 이루어지지 않는다.

 

 

하지만 리렌더링이 이루어지지 않았을뿐, 값은 ref에 저장되어 있는 것을 볼 수 있다.

 

 

 

💡 무엇이 더 효율적이고 맞는 방법일까?

 

리액트는 렌더링 성능을 중요시하기 때문에

처음 든 생각은 'Input 의 값이 입력될때마다 렌더링이 일어날 필요는 없다' 였다.

Input 에 입력 중인 상태에서의 입력 값은 제출하기 버튼을 누르지 않는 한

상태를 업데이트 시켜줄 필요가 없다고 생각했기 때문에

입력하는동안 계속해서 리렌더링이 일어날 필요가 없다고 느꼈다.

 

하지만 Input 을 통해 들어오는 값은 리렌더링 할 때 큰 연산과정이 아니라고 생각하기도 했고,

공식문서에서는 대부분의 경우 폼을 구현하는데 제어 컴포넌트 (useState로 상태 관리중인)를

사용하는 것을 권장한다는 글을 봤다. 

Input 값도 하나의 상태로 useState를 통해 상태 관리를 하며 추적이 쉽게 하는 것이

나중에 Input 의 값을 이용해 무언갈 만들 때 편할거 같다는 생각도 들었다.

그래서 내가 생각하기엔 Input 의 값은 useState로 관리하는게 맞는 방법이라고 생각했다.