230615 리액트 - useRef

Ref : Reference (참조) - useRef( )

 

리액트의 훅기능 메서드 함수

useEffect

useContext

useReducer

useCallback

useMemo

 

 

import { useRef, useState } from "react";
import "./Body.css";

function Body() {
  const [text, setText] = useState("");
  const textRef = useRef<any>(null); //다시 인풋박스 빈칸으로

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };
  const handleOnClick = () => {
    if (text.length < 5) {
      //5글자 이하면
      textRef.current.focus(); //인풋박스 포커스 고정
    } else {
      // 5글자 초과
      alert(text); //알림창에 입력한 텍스트 나타남
      textRef.current.value = ""; //다시 인풋박스 빈칸으로
    }
  };

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

export default Body;

---

*useRef( ) 함수 : 인자값으로 전달받은 값을 초기값으로 받아와 하나의 객체를 생성.