React에서 DOM조작하기

Input에 정해진 길이보다 작은 길이를 입력을 하고나서 저장하기 버튼을 누르면, 해당 Input을 다시 입력하게끔 focus를 주는 방법

alert()를 띄우는거는 좋지않은 UX임, 트렌디하지않음.
그래서 focus를 주는데, focus를 주기 위해서는 어떤 DOM element에 focus를 줘야 하는지 Javascript코드가 알고 있어야 하는데, DOM요소를 선택 할 수 있는 기능을 리액트는 제공을 할 수 있음. 그 기능이 바로 useRef() 기능임

import {useRef, useState} from 'react';

const DiaryEditor = () => {

useRef()함수를 호출해 authorInput에 담아둠, 그러면 authorInput은 HTML DOM요소를 접근 할 수 있음
const authorInput = useRef();
const contentInput = useRef();

// 저장할시 실행
const handleSubmit = () => {
	if (state.author.length < 1) {
    
	//DOM요소를 선택하는 useRef()기능으로 생성한 authorInput객체는 현재 가르키는 값을 current로 불러와서 사용.
	즉, authorInput.current는 author인풋을 가르키고, 거기에 focus()를 사용
		authorInput.current.focus();
		return
	} else if (state.content.length < 1) {
		// focus
		contentInput.current.focus();
		return
	}
	alert('저장 완료!')
}

return (
	<div className="DiaryEditor">
		<h2>게시판</h2>
		<div>
			<input
				// authorInput을 전달해주면 Input태그에 접근할 수 있게됨
				ref={authorInput}
				name="author"
				value={state.author}
				onChange={handleChangeState}
			/>
		</div>

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