<aside> 💡 다양한 사용자 입력 처리하기

세부목표

1. 한줄 입력 처리하기
2. 여러 줄 입력 처리하기
3. 선택 박스 입력 처리하기
4. 사용자 입력 데이터 핸들링하

</aside>

input에 value를 넣으면 직접 입력을 못하지만 onChange이벤트를 통해 바꿀 수 있다.

import {useState} from 'react';

const DiaryEditor = () => {
    const [author, setAuthors] = useState("박정수");

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            {/* 아래처럼 value에 저렇게 값을 넣으면 직접 키보드로 값 변경 x */}
            <input value={author} onChange={(e)=>{
								name="author"
								console.log(e.target.value);
								console.log(e.target.name);
                setAuthors(e.target.value);
            }}/>
        </div>
    </div>
};
export default DiaryEditor;

• 다중 입력 처리 (textarea)

import {useState} from 'react';

const DiaryEditor = () => {

    const [state, setState]

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

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            {/* 아래처럼 value에 저렇게 값을 넣으면 직접 키보드로 값 변경 x */}
            <input value={author}
                name="author"
                onChange={(e)=>{
                    setAuthors(e.target.value);
                }}/>
        </div>
        <div>
            <textarea value={content} 
                onChange={(e)  => {
                    setContent(e.target.value);
                }}
        />
        </div>
    </div>
};
export default DiaryEditor;

• state 하나로 묶어서 하기

…state는 맨위에 다 적어야함

\\import {useState} from 'react';

const DiaryEditor = () => {

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

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            {/* 아래처럼 value에 저렇게 값을 넣으면 직접 키보드로 값 변경 x */}
            <input value={state.author}
                name="author"
                onChange={(e)=>{
                    setState({
                        ...state,
                        author: e.target.value,
                    });
                }}/>
        </div>
        <div>
            <textarea value={state.content} 
                onChange={(e)  => {
                    setState({
                        ...state,
                        author: state.author,
												//content:  e.target.value,
                    });
                }}
        />
        </div>
    </div>
};
export default DiaryEditor;

• select로 감정 추가 넣고 상태변화 이벤트 핸들러 하나로 묶

import {useState} from 'react';

const DiaryEditor = () => {

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

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

• 저장 버튼 만들기!

import {useState} from 'react';

const DiaryEditor = () => {

    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 = () => {
        console.log(state);
        alert("저장 성공")
    }

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