리액트의 Ref를 이용하면 돔(DOM) 요소들을 직접 조작할 수 있다.

useRef 사용하기

리액트에서는 useRef라는 리액트 함수를 이용해 Ref 객체를 생성한다.

돔 요소의 하나인 input 태그의 입력 폼에 접근하는 Ref를 만들어 보자.

import { useRef, useState } from "react";

function Body() {
  const [text, setText] = useState("");
  const textRef = useRef();

  const handleOnChange = (e) => {
    setText(e.target.value);
  };
  const handleOnClick = () => {
    alert(text);
  };

  return (
    <div>
      <input ref={textRef} value={text} onChange={handleOnChange} />
      <button onClick={handleOnClick}>작성 완료</button>
    </div>
  );
}
export default Body;

<aside> 💡 ① useRef는 리액트가 제공하는 기능이므로 react 라이브러리에서 불러온다.

② 함수 useRef는 인수로 전달한 값을 초깃값으로 하는 Ref 객체를 생성한다. 생성한 Ref를 상수 textRef에 저장한다.

③ input 태그에서 ref={textRef} 명령으로 textRef가 돔 입력 폼에 접근하도록 설정한다. 이제 textRef를 이용하면 입력 폼을 직접 조작할 수 있다.

</aside>

저장해도 페이지에서는 아직 아무런 변화도 없을 것이다. 입력 폼에 대한 어떤 조작도 아직 시도하지 않았기 때문이다.

useRef로 입력 폼 초기화하기

웹 서비스의 로그인 페이지는 대부분 사용자가 ID와 패스워드를 입력하고, 로그인 버튼을 클릭하면 패스워드가 올바른지 점검한다. 그런 다음 패스워드 입력 폼에서 작성한 값을 초기화한다. 리액트에서 Ref를 이용하면 이런 동작을 수행할 수 있다.

이번에는 useRef를 이용해 텍스트 입력 폼을 초기화하는 법을 알아보자.

import { useRef, useState } from "react";

function Body() {
  (...)
  const handleOnClick = () => {
    alert(text);
    textRef.current.value = "";
  };
  (...)
}
export default Body;

<aside> 💡 ① 버튼을 클릭해 이벤트 핸들러 handleOnClick을 실행한다. 대화상자에서 확인 버튼을 클릭 하면, textRef.current(textRef가 현재 참조하고 있는 돔 요소)의 value 값을 공백 문자열로 초기화한다.

</aside>