[React] 특정 DOM 선택하기 : UseRef()

리액트에서 특정 DOM을 직접 선택해야 하는 상황일 때 사용해줌 
자바스크립트에서 특정 DOM 요소를 가져올 때 getElementById, querySelector와 같은 함수를 사용하는 것과 동일 

 

사용 예시 : 

import React,{ useState, useRef } from 'react';

export default function DiaryEditor() {

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

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

    const handleChange = (event) => {
        setState({
            ...state,
            [event.target.name] : event.target.value,
        })
    }

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

        if(state.content.length < 5) {
            contentInput.current.focus();
            // alert('내용은 최소 5글자 이상 입력해주세요');
            return;
        }

        alert('저장되었습니다!');
    }

    return (
        <div className='DiaryEditor'>
            <h2>오늘의 일기</h2>
            <div>
                <input 
                ref={authorInput}
                name='author'
                value={state.author}
                onChange={handleChange} />
            </div>

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

            <div>
                오늘의 감정지수 : 
                <select
                    name='emotion'
                    value={state.emotion}
                    onChange={handleChange}
                >
                    <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>
    );
}

 

참고 문서 : 

https://react.dev/reference/react/useRef

useRef – React