감정 일기장 만들기 (2) - React에서 DOM 조작하기(useRef)

오늘 배울 것은 useRef를 사용하여 React DOM을 조작하는 방법이다.
구체적으로는 말하면, useRef를 사용하여 submit하는 내용이 일정 길이를 넘지 못할 경우 다시 입력하는 동작을 보여준다.

import {useRef} from 'react';
const handleSubmit = () => {
    //focus
    if (state.author.length <= 1) {
      authorInput.current.focus();
      return;
    }
    // focus
    if (state.content.length < 5) {
      contentInput.current.focus();
      return;
    }
    alert("저장 성공");
  };
----------------------------------------
	<div>
        <input
          ref={authorInput}
          name="author"
          value={state.author}
          onChange={handleChangeState}
        />
      </div>
      <div>
        <textarea
          ref={contentInput}
          name="content"
          value={state.content}
          onChange={handleChangeState}
        />
      </div>

submit 이벤트를 담당하는 함수에 작성자 length, 본문 length에 조건을 걸어서 특정 조건을 넘지 못 할 경우 focus() 기능을 이용하여 submit 되지 못하도록 한다.

먼저, input 태그 안에 ref = {원하는이름}을 넣고, 해당 submit 이벤트의 조건문에 원하는이름.current.focus(); 처리를 한다.

이렇게 할 경우, alert해서 사용자에게 알려주는 것 보다 훨씬 깔끔하게 사용자에게 내용을 추가로 입력하라는 노티스를 전달할 수 있다.


최종 코드는 다음과 같다.

import { useRef, useState } from "react";

const DiaryEditor = () => {
  const authorInput = useRef();
  const contentInput = useRef();
  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1,
  });

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

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

  const handleSubmit = () => {
    //focus
    if (state.author.length <= 1) {
      authorInput.current.focus();
      return;
    }
    // focus
    if (state.content.length < 5) {
      contentInput.current.focus();
      return;
    }
    alert("저장 성공");
  };

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          ref={authorInput}
          name="author"
          value={state.author}
          onChange={handleChangeState}
        />
      </div>
      <div>
        <textarea
          ref={contentInput}
          name="content"
          value={state.content}
          onChange={handleChangeState}
        />
      </div>
      <div>
        오늘의 감정점수 :
        <select
          name="emotion"
          value={state.emotion}
          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 DiaryEditor;