React | useRef로 DOM 선택하기

📌ref는 특정 DOM을 선택할 때 사용한다.

📌함수형 컴포넌트에서는 useRef Hook을 사용한다.

📌클래스형 컴포넌트에서는 React.createRef 함수를 사용한다.

📌Ref는 서드파티 DOM 라이브러리를 사용할 때, 애니메이션을 직접적으로 실행시킬 때와 같은 상황에서 사용한다.

 

useRef를 사용하기 위해 Import

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

 

버튼을 클릭하면 input에 focus가 잡힌다!

✔️useRef()를 사용해서 ref객체를 만든다

✔️ref객체의 current를 통해 DOM에 접근할 수 있다

✔️ref={nameInput}을 이용해 ref객체를 전달한 것

function InputSample() {
  const [name, setName] = useState("");

  const nameInput = useRef();

  const handleOnChange = (e) => {
    setName(e.target.value);
  };

  const handleBtnClick = () => {
    setName("");
    nameInput.current.focus();
  };

  return (
    <div>
      <input onChange={handleOnChange} value={name} ref={nameInput} />
      <button onClick={handleBtnClick}>클릭</button>
    </div>
  );
}

export default InputSample;