리액트 useRef 으로 돔 요소 조작하기

리액트 useRef 으로 돔 요소 조작하기

---

https://react-ko.dev/reference/react/useRef

useRef – React

---

 

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

 이 기능을 이용해 돔 요소를 제어하는 포스팅.

 

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

 

예제) App.js는 생략한다.

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

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

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

  const handleOnClick = () => {
    if (text.length < 5) {
      alert("최소 다섯 글자 이상을 입력하세요");
      textRef.current.focus();
    } else {
      alert("입력하신 정보는 : " + text);
      setText("");
    }

    textRef.current.value = "";
  };

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

export default Body;

 

 소스에서 핵심적인 내용은 import 한 useRef 를

const textRef = useRef();

 

변수 선언을 하고,

 <input ref={textRef} value={text} onChange={handleOnChange} />

 

input 박스에 연결 시킨다.

 

이후, handleOnClick 함수에서

textRef.current.value = "";

 

식으로 돔에 접근 input 박스를 null 처리 하고 있다.

 

간단한 예제로 useRef 기능에 대해 알아봤다.