useRef

useRef

1. useRef

 - React 라이브러리에서 제공하는 훅(Hook)

 - 함수형 컴포넌트 내에서 DOM 요소 or 값을 참조할 때, 사용되는 도구

 - 이를 통해, 컴포넌트의 렌더링 사이클과는 독립적으로 값을 저장 및 유지 가능

    → useState와 달리, 리렌더링을 하지 않고 값을 저장 및 유지함

 

2. 예시

 - RefEx.js

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

function RefEx() {
  const formInputNoRef = useRef(null);
  const [no, setNo] = useState("");

  const notice = () => {
    formInputNoRef.current.focus();

    if (!no) {
      alert("숫자를 입력해주세요.");
      return;
    }

    alert(`당신이 입력한 숫자는 ${no} 입니다.`);
    setNo("");
  };

  return (
    <>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          notice();
        }}
      >
        <input
          ref={formInputNoRef}
          type="text"
          placeholder="숫자"
          value={no}
          onChange={(e) => setNo(e.target.value)}
        />
        <button>실행</button>
      </form>
    </>
  );
}

export default RefEx;

 

 - App.js

import RefEx from "./RefEx";

import "./App.css";

const App = () => {
  return (
    <>
      <RefEx />
    </>
  );
};

export default App;

 

 - 결과

    - 숫자를 입력하지 않고 실행 버튼 클릭 시, 창이 뜨면서 다시 input 태그에 focus 됨

    - 숫자를 입력하고 실행 버튼 클릭 시, 창이 뜨면서 다시 input 태그에 focus 됨