useState VS useRef

useState와 useRef의 차이점을 알아보고 어떤 경우에 어떤 hook 을 사용하는 것이 좋을지 확인하자.

 

차이점

1. 값의 변경에 따른 렌더링
   • useState
     • 상태를 변경할 때마다 컴포넌트가 리렌더링 된다.
     • 컴포넌트의 상태를 변경하고 UI를 업데이트할 수 있다.
   • useRef
     • 값이 변경되어도 컴포넌트를 리렌더링 하지 않는다.
     • 일반적으로 렌더링과 상관없는 값이나 DOM 접근에 사용된다.
2. 사용 목적
   • useState
     • 컴포넌트의 상태를 관리하고 상태의 변경에 따라 리렌더링이 필요한 경우 사용한다.
     • 화면에 표시되는 정보 등이 해당된다.
   • useRef
     • 렌더링과 무관하게 특정 값에 접근할 때 사용한다.
     • DOM 요소에 대한 참조를 생성하거나 이전 값과 현재 값을 비교 또는 setInterval의 intervalId를 저장하여 clear 시 사용한다.

 

input 내부의 값은 어떤 hook 으로 관리해야 할까?

useState와 useRef 의 차이점 등의 내용을 찾아본결과 나는 상황에 따라 다르다는 생각이 들었다.

input 의 값이 렌더링 되어 사용될 상황인지, 아니면 렌더링은 되지 않고 값을 가지고 있는지에 따라 다를 것 같다.

만약 input의 값이 화면에 렌더링 되어 보여져야 한다면 useState 를 사용하고,

input 의 값이 화면에 보여지지 않아도 된다면 useRef 를 사용하는게 맞다는 생각이다.

 

 

useState - 예) 입력값을 보여줘야 하는 경우

import React, { useState } from 'react';

export default function Detail() {

  const [text, setText] = useState('');
  
  const changeHanler = (e) => {
    console.log(e.target.value);
    setText(e.target.value);
  }

  console.log('다시 렌더링~');
  return (
    <>  
        <p>첫 번째 input : {text}</p>
        <input type="text" value={text} onChange={changeHanler} />
    </>
  )
}

 

 

state가 input에서 값을 입력할 때 마다 바뀌기 때문에 계속 렌더링 되는 것을 확인할 수 있다.

 

 

useRef - 예) 유효성 검사 / 화면에 렌더링 되지 않는 경우

import React, { useRef, useState } from 'react';

export default function Detail() {

  const valueCheck = () => {
    if(!textRef.current.value.trim()){
      alert('값이 비었습니다. 내용을 입력해주세요');
      return;
    }

    alert('유효성 검사를 통과했습니다.');
  }

  console.log('다시 렌더링~');
  return (
    <>  
        <input type="text" ref={textRef} />
        <br /><br />
        <button onClick={valueCheck}>유효성 검사!</button>
    </>
  )
}

화면에 보여지지 않고, 내부에서 유효성 검사를 하기 때문에 useRef 를 사용하면 불필요한 렌더링을 줄일 수 있다.

useRef 를 사용하여 값이 바뀌어도 렌더링이 되지 않아 '다시 렌더링' 부분의 콘솔이 1번 찍힌걸 확인할 수 있다.