useState로 사용자 입력 처리

리액트 훅의 useState는 사용자의 입력을 실시간으로 감지하고 렌더링 한다.

import { useState } from "react";

const DiaryEditor = () => {

    const [author,setAuthor] = useState("");

    return (
    <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
    </div>
    );
};

입력값이 바뀔 때마다 상태 변화 함수인 setAuthor로 author state에 입력값을 저장해주면 된다. -> author라는 state 값을 작성자가 입력받을 input 태그에 value prop으로 전달한다.

<h2>오늘의 일기</h2>
<div>
   <input value={author}/>
</div>

이러면 브라우저에서는 입력값을 입력해도 아무것도 작성되지 않는다. 왜냐하면 author state는 setAuthor라는 상태 변화 함수만 바꿀 수 있기 때문이다. -> input 태그에 변화가 생겼을 때 setAuthor를 수행해야 실행창에서도 반영이 된다.

<h2>오늘의 일기</h2>
        <div>
            <input value={author} onChange={(e)=>{
                console.log(e);
            }}/>
        </div>

onChange 이벤트로 사용자가 input 태그에 입력 시 값이 변하고 변화할 때마다 콜백함수를 수행하는 코드다.

-> 콘솔에 이벤트 객체가 출력되는 것을 볼 수 있다.
우리가 원하는 값은 input의 value값이므로 e.target.value 로 입력한 값을 출력할 수 있다.

state를 동시에 관리할 수 있는 방법

const DiaryEditor = () => {
    const [state, setState] = useState({
        author: "",
        content: "",
    });

• useState안에 author와 content를 ""를 기본값으로 하여 할당해준다.

<div>
            <input value={state.author} onChange={(e)=>{
                setState({
                    author: e.target.value,
                    content: state.content,
                });
            }}/>
</div>
<div>
            <textarea
                value={state.content}
                onChange={(e)=>{
                    setState({
                        content: e.target.value,
                        author: state.author,
                    });
                }}
            />
</div>

author를 수정하는데 content도 수정되는 오류가 생기지 않게 하기 위해 input 태그는 setState안에 author를 변하는 값으로 설정해준다. 이렇게 하는 이유는 객체의 값을 바꾸려면 새로운 객체를 만들어 전달해줘야 하기 때문이다. 그리고 content의 값은 바뀌지 않아야 하므로 state의 현재 content값으로 설정한다. textarea에서 바뀌는 값은 content이므로 input태그와 반대로 설정한다.

onChange 에 하나의 함수로 전달

const handleChangeState = (e)=>{

        setState({
            ...state,
            [e.target.name]: e.target.value,
        });
    }

input태그 name은 'author', textarea 의 name은 'content'로 설정한 후 handleChangeState에서 스프레드 연산자로 state값을 준 다음 변하는 값을 name으로 받아 value로 할당할 수 있다.