[React] 실습 / DOM 조작 / useRef

개요

저장 버튼 클릭 했을 때, HTML 태그들의 유효성 검사(정상적으로 입력이 되었는지 확인) 하고 아니라면 해당 태그를 focus 하도록 한다. 

작성자 input 태그는 최소 1글자 이상 입력해야하고, 보고 본문은 최소 5글자 이상 입력하여야 한다.

 

UseRef

DOM 요소를 선택할 수 있는 기능

import { useRef, useState } from "react";

const ReportEditor = () => {
  const authorInput = useRef();	//userRef 를 사용하여 DOM 선택 변수 생성
  const contentInput = useRef();

  const [state, setState] = useState({
    author: "",
    content: "",
    grade: 1
  });

  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = () => {
    if (state.author.length < 1) {
      authorInput.current.focus();	//해당 변수에 해당하는 DOM 객체 focus
      return;
    }

    if (state.content.length < 5) {
      contentInput.current.focus(); //해당 변수에 해당하는 DOM 객체 focus
      return;
    }

    console.log(state);
    alert("저장 성공!");
  };

  return (
    <div className="ReportEditor">
      <h2>오늘의 보고</h2>
      <div>
        <input
          ref={authorInput}	//useRef 변수를 ref 속성에 대입
          value={state.author}
          onChange={handleChangeState}
          name="author"
          placeholder="작성자"
          type="text"
        />
      </div>
      <div>
        <textarea
          ref={contentInput}
          value={state.content}
          onChange={handleChangeState}
          name="content"
          placeholder="보고"
          type="text"
        />
      </div>
      <div>
        <span>오늘의 평가점수 : </span>
        <select name="grade" value={state.grade} onChange={handleChangeState}>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </div>
      <div>
        <button onClick={handleSubmit}>보고 저장하기</button>
      </div>
    </div>
  );
};
export default ReportEditor;

useRef 를 사용하여 DOM 요소를 선택할 수 있는 변수를 만들고 해당 변수를 태그의 ref 속성으로 지정해주게 되면 useRef 변수.current.focus 로 해당 객체를 접근할 수 있다.

 

참고

https://espania.tistory.com/354

[React] 실습 / 사용자 입력 처리