감정일기장 프로젝트 (1)

한입 크기로 잘라 먹는 리액트(React.js) 수강 TIL

 

 

---

오늘은 usestate와 useref을 많이 활용했다. 특히 usestate를 사용해서 사용자의 값을 핸들링 하는 법을 배웠다. 

 

import { useRef, useState } from "react";

const DiaryEditor = () => {

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

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


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

    const handleSubmit =  ()=> {
        if (state.author.length < 1) {
            //alert("작성자는 최소 1글자 이상 입력해주세요");
            authorInput.current.focus();
            return;
        }
        if ( state.content.length < 5 ) {
            //alert("일기 본문은 최소 5글자 이상 입력해주세요");
            contentInput.current.focus();
            return;
        }

        alert("저장성공");
    }

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input ref={authorInput} name="author" value={state.author} onChange={handleChangeState
                //setState(
                   // {author:e.target.value,
                   // content:state.content,
                    // ...state 로 스프레드 하면 10개씩 객체가 늘어나는 경우에 쓸 수 있다. 
                    //대신 뒤에 스프레드를 뒤에 써야함 
                    //}

                //) 
            }/>
        </div>
        <div>
            <textarea ref={contentInput} name="content" value={state.content} onChange={handleChangeState
                /* setState({
                    ...state,
                    content:e.target.value,
                }
            
               )  */
            }/>
        </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;

● setState마다 변하는 state값을 전달해주는게 포인트인듯하다. 

처음에는 이름input과 내용input 각각 onchage에 콜백함수를 넣어줬는데 

handleChangeState 함수로 만들어서 같이 처리해줬다. 

 

● [e.target.name] : e.target.value 은 setState에 전달되는 e의 값들이다. 이해가 안되면 console.log찍어봐야한다. 

 

● useref로 DOM 요소를 조작할 수 있다. 

 

완성

이렇게 만들어진다. 

강의 친절하게 설명 잘해주는듯

아직 새로운 것들이 많아서 낯설다..!