😎 DOM조작하기 - useRef

✔ 일기 저장 버튼을 클릭했을 때, 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus하기
✔ 정해진 길이보다 적게 작성하면 focus하고 정상적으로 입력이 되었으면 "저장성공" 창이 나오도록 설정

🎃 useRef

✔ DOM요소를 선택 조작을 도와주는 기능을 가지고 있다.
✔ react에서 제공하는 기능이다.

🎃 focus란

내가 만약 input창에 정해진 길이만큼 작성하지 않으면 테두리가 검은색이 되어 input창에 focus된다.

input창에는 정해진 길이만큼 작성해서 넘어갔는데 textarea창에 정해진 길이만큼 작성하지 않아 textarea창에 focus되었다.

input창과 textarea창 둘다 정해진 길이만큼 작성했으면 넘어가서 "저장성공"이 나옴다.

useRef를 이용하여 정해진 길이보다 적게 작성하면 focus하기

import React, {useRef, useState} from "react";
//focus를 사용하기 위해 react에서 useRef기능 임포트해오기


const DiaryEditor = () =>{

    const contentInput = useRef()
    const authorInput = useRef();
    //useRef함수를 호출해서 반환값을 authorInput상수에 담아준다.
    //authorInput상수에는 React.MutableRefObject가 저장된다.
    //MutableRefObject의 기능은 Html(DOM요소)에 접근할 수 있도록 한다.

    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
        })
    }

    // 저장버튼 onclick함수
    const handleSubmit = () => {
        if(state.author.length<1){
            authorInput.current.focus()
          //DOM요소를 선택하는 useRef기능을 생성한 레퍼런스 객체(authorInput)는 
          //현재 가르키는 값을 current라는 프로퍼티로 불러와서 focus한다.
            return
        }

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

        alert("저장성공")
    }


    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        
         <div>
            {/* 작성자 창 만들기 */}
            <input 
            ref={authorInput}
            //authorInput 레퍼런스 객체를 통해서 input태그에 접근할 수 있게된다.
            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}
                 >
                {/* select : 1에서 5까지 선택하는 태그 */}
                 <option value = {1}>1</option>
                 {/* option : select태그에서 선택할 수 있는 옵션 */}
                 <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;