[TIL] useState와 useRef의 차이

useState와 useRef 모두 React에서 쓰이는 훅으로 useState는 state를 useRef는 initialValue를 관리한다.

 

아래는 useState를 사용한 예시이다.

import { useState } from "react";


 function App () {
  const [inputValue, setInputValue] = useState("");

  const addTextHandler = (e) => {
    setInputValue(e.target.value);
  }

  return (
    <>
      <input type="text" value={inputValue} onChange={addTextHandler}/>
      <p>{inputValue}</p>
    </>
  );
}

export default App

 

 

useState

영상에서 보는 바와 같이 입력란에 타이핑 하는 즉시 텍스트가 화면에 반영이 되는 것(렌더링 되는 것)을 알 수 있다.

한글자를 입력 할 때마다 리렌더링이 되기 때문에 시스템 효율성이 좋지 않지만 

회원가입 시 아이디나 비밀번호 또는 email 주소를 입력할 때 즉각적인 유효성 검사를 할 수 있다는 장점이 있다.

 

useRef를 사용한 예시도 보겠다.

 

import { useRef } from "react";


 function App () {
  const inputRef = useRef(null);

  const alertBtn = () => {
    alert(inputRef.current.value)
  }

  return (
    <>
      <input type="text" ref={inputRef}/>
      <button onClick={alertBtn}>버튼</button>
    </>
  );
  
}

export default App

 

 

useRef는 useState처럼 리렌더링이 되는 것이 아니기 때문에

위에 영상처럼 화면에 그대로 뿌릴 수 없고 

버튼처럼 이벤트를 넣어서 이벤트 함수를 만들어야 한다.

useRef는 current로 값을 확인 할 수 있는데 input의 value를 쓰려면 input.current.value라고 써야한다.

그래서 useState처럼 유효성 검사를 철저하게 해야 하거나 크게 중요하지 않은 값이면

useRef를 쓸 수 있다.