돔요소를 선택할수 있는 기능을 리엑트가 제공 ⇒ userRef

React.MutableRefObject<undefined> ⇒ html dom에 접근가능하도록해줌.

import { useState, ***useRef*** } from "react"; // import 추가

const DiaryEditor = () => {
  const [state, setState] = useState({
    author: "",
    content: "",
    point: 4,
  });

  ***const authorInput = useRef(); // useRef 선언.***

  const handleChangeState = (e) => {
    console.log(e.target.name);
    console.log(e.target.value);

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

  const submitClick = () => {
    if (state.author.length < 1) { // 특정한 조건에 걸리면
      ***authorInput.current.focus();** // **authorInput가 참조하는 ref input 태그에 포커스를 줌***
      return;
    }
    if (state.content.length < 5) {
      alert("내용 5자 이상");
      return;
    }

    alert("저장완료.");
  };

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          ***ref={authorInput} // 해당 input태그는 authorInput 를 참조하도록 ref 선언***
          name="author"
          value={state.author}
          onChange={handleChangeState}
        />
      </div>

      <div>
        <textarea
          name="content"
          value={state.content}
          onChange={handleChangeState}
        ></textarea>
      </div>

      <div>
        <select name="point" value={state.point} 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={submitClick}>저장하기</button>
      </div>
    </div>
  );
};

export default DiaryEditor;