[React] useState, useRef : input 값 관리

 

💡 useState : 컴포넌트 상태 관리 훅 

리렌더링이 꼭 필요한 값을 다룰 때 사용, 렌더링이 일어나면 내부 변수들 초기화

(버튼이 눌리면 숫자가 올라가야할 때!)

💡 useRef : DOM 요소에 접근할 수 있도록 하는 훅

state 와 비슷하게 저장한다는 느낌.

리렌더링을 발생시키지 않는 값을 저장할 때 사용, 내부 변수  초기화 XXX

 

import { useRef, useState } from "react";

function RefApp() {
  const ref = useRef("");
  const [value, setValue] = useState("");

  console.log("hi");

  return (
    <div style={{ margin: "10px" }}>
      <div>
        state :
        <input
          type="text"
          value={value}
          onChange={(event) => {
            setValue(event.target.value);
          }}
        />
      </div>
      <div>
        ref : <input type="text" ref={ref} />
      </div>
    </div>
  );
}

export default RefApp;

 

state input 은 값을 입력할 때 렌더링이 일어나고,

ref input 은 렌더링이 일어나지 않는다.

 

둘 중 하나만 사용하는 게 아니라 상황에 따라 선택해 사용해야 할 것 같다.

 

✳️ 화면에 변화가 있어야 하는 경우라면

(카운트를 올린다던가, 검색어에 따라 실시간으로 검색이 되거나 등)

state 사용

 

✳️ 단순히 조건을 걸고 input 에 포커스를 주거나,

값을 실시간으로 받는게 아니라 버튼 클릭 시 넘기도록 한다면

ref 사용