사용자 입력 처리하기

input 컴포넌트 만들기

1. 컴포넌트 구조 만들기

const DiaryEditor = ()=>{

    return(
    <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input/>
        </div>
        <div>
            <textarea/>
        </div>
      	<div>
            <select>
                <option vlaue ={1}>1</option>
                <option vlaue ={2}>2</option>
                <option vlaue ={3}>3</option>
                <option vlaue ={4}>4</option>
                <option vlaue ={5}>5</option>
            </select>
        </div>
		<div>
            <button>일기 저장하기</button>
        </div>
    </div>
    )
}
export default DiaryEditor;

+input, textarea, select, button으로 이루어진 간단한 입력 장치

2. useState사용해 실시간 변경사항 브라우저에 반영하기

import {useState} from "react";

const DiaryEditor = ()=>{

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

    return(
    <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input 
            value = {author}
            onChange = {(e)=>{
                setAuthor(e.target.value);
            }}/>
        </div>
        <div>
            <textarea 
            value = {content}
            onChange = {(e)=>{
                setContent(e.target.value);
            }}/>

        </div>

• import {useState} from "react"; 코드 작성해 useState를 쓸 수 있도록 react를 연결시켜준다.
• 각 입력html에 각 state를 이용해 입력갑, 초기값, 실행 함수를 지정한다.

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

• input의 value는 브라우저에 나타는 값
• onChange함수를 이용해 값이 변경될때마다 함수가 실행되면서 State에 지정한 함수가 실행 되도록 한다.

    <input 
    value = {author}
    onChange = {(e)=>{
      setAuthor(e.target.value);
    }}/>

• e는 이벤트 매개변수로 이벤트가 일어나면 여러 데이터를 가지고 있어, e의 target을 이용해 어떤 것이 타켓 되었는지 판별하고 value의 값을 가져온다.

중복된 State동작 정리하기

import {useState} from "react";

const DiaryEditor = ()=>{

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

    return(
    <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input 
            value = {state.author}
            onChange = {(e)=>{
                setState({
                    ...state,
                    author : e.target.value,
                });
            }}
            />
        </div>
        <div>
            <textarea 
            value = {state.content}
            onChange = {(e)=>{
                setState({
                    ...state,
                    content : e.target.value,
                })
            }}/>

• 공통된 동작은 useState를 객체 형식으로 값들을 관리 하여 사용할 수 있다.

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

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

• setState()안에 객체의 프로퍼티 값을 다시 적어주어 값을 변경하도록 한다
• 이때, 변경되지 말아야 하는 값은 스프레드문법을 이용해 전체의 값을 열거해준 뒤, 변경할 내용을 마지막에 써 값을 변경시킨다.

중복된 setState함수 동작 함수로 따로 정리하기

import {useState} from "react";

const DiaryEditor = ()=>{

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


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

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

        </div>