React에서 DOM 조작하기

1. input 길이 측정 & input 포커스

const handleSubmit = () => {
    //console.log(state);
    let athr = state.author;
    let cntnt = state.content;
    let emstn = state.emotion;
    if (athr.length < 1) {
      alert("작성자명은 최소 한글자 이상 입력해주세요");
      // alert 대신 input에 focus를 주는 방법
      authorInput.current.focus();
      return;
    }

    if (cntnt.length < 5) {
      alert("본문은 최소 5글자 이상 입력해주세요");
      // alert 대신 input에 focus를 주는 방법
      contentInput.current.focus();
      return;
    }
    alert("작성 완료!");
  };

• React에서 DOM 요소 선택하는 기능 = {useRef}

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

const DiaryEditor = () => {
  // 각 input element에 접근하기 위해 useRef 기능 사용
  // useRef 함수를 호출해서 변수에 담아줌.
  const authorInput = useRef(); // 작성자 input
  const contentInput = useRef(); // textarea
  
  ...
  
  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          // authorInput 이라는 객체를 통해 해당 input 객체에 접근 가능
          ref={authorInput}
          name="author"
          // state 객체에서 맞는 값을 선택하여 가져옴
          value={state.author}
          onChange={handleChangeState}
        />
        <textarea
          ref={contentInput}
          name="content"
          value={state.content}
          onChange={handleChangeState}
        />
      </div>
      <button onClick={handleSubmit}>저장하기</button>
    </div>
  );
};

• const authorInput: React.MutableRefObject -> MutableRefObject : html 돔 요소에 접근할 수 있는 기능