[Javascript] DOM useRef focus 이란?

• 다음과 같이 만들어 놓은 일기에 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하면 아니라면 focus하기

import { useState } from "react";

const DiaryEditor = () => {

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

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

    const handleSubmit = () => {
        console.log(state);
        alert("저장 성공");
    }

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input 
            name="author"
            value={state.author} 

            onChange={handleChangeState}

            />
        </div>
        <div>
            <textarea 
								 
                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;

• alert를 사용한 경고 문구

const handleSubmit = () => {
        if(state.author.length < 1){
            alert("작성자는 최소 1글자 이상 입력해주세요");
            return;
        }

        if(state.content.length < 5){
            alert("일기 본문은 최소 5글자 이상 입력해주세요");
            return;
        }
        alert("작성 성공!");
    }

• 개인적으로 경고 문구를 띄워줄때 alert를 많이 사용했는데, 요즘 트렌드는 focus를 사용하는 것이다

import { useRef ,useState } from "react";

const DiaryEditor = () => {

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

    const authorInput = useRef();
    const contentInput = useRef();

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

    const handleSubmit = () => {
        if(state.author.length < 1){
            authorInput.current.focus();
            return;
        }

        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;

1. useRef 를 import
2. const authorInput = useRef();로 선언해주고
3. 사용하는 기능 태그에 ref={contentInput}을 적어 접근하게 함
4. authorInput.current.focus(); 로 focus하게 함