<aside> 💡 세부목표

일기 저장 버튼을 클릭했을 때

작성자와 일기가 정상적으로 입력되었는지 확인하고

아니라면 focus하기

</aside>

사용 import

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

해당 authorInput은 React.MutableRefObject라는게 저장이 되며 해당 기능은 html 즉 dom 요소를 접근할 수 있는 기능을 제공

const authorInput = useRef();

• focus 주는 기능 만들기

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 = () => {
        if(state.author.length < 1){
            // focus
            authorInput.current.focus();
            return;
        }

        if(state.content.length < 5){
            // focus
            contentInput.current.focus();
            return;
        }

        alert("저장 성공")
    }

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            {/* 아래처럼 value에 저렇게 값을 넣으면 직접 키보드로 값 변경 x */}
            <input
                ref={authorInput} 
                value={state.author}
                name="author"
                onChange={handleChangeState}/>
        </div>
        <div>
            <textarea 
                ref={contentInput} 
                value={state.content}
                name="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;