React, State 사용하기

EventPractice.js

import React, { useState } from 'react';

const EventPractice = () => {
    const [form, setForm] = useState({ username: '', message: '' });

    const onChange = (e) => {
        // 기존의 form 내용을 이 자리에 복사 한 뒤 원하는 값을 덮어 씌우기, 스프레드 연산자
        const nextForm = { ...form, [e.target.name]: e.target.value }
        setForm(nextForm);
    };

    const onClick = () => {
        alert(`${form.username}: ${form.message}`);
        setForm({ username: '', message: '' });
    };

    const onKeyPress = (e) => {
        if (e.key === 'Enter') onClick();
    };

    return (
        <div>
            <h1>이벤트 연습</h1>
            <input
                type="text"
                name="username"
                placeholder="유저명"
                value={form.username}
                onChange={onChange}
            />
            <input
                type="text"
                name="message"
                placeholder="아무거나 입력해보세요"
                value={form.message}
                onChange={onChange}
                onKeyPress={onKeyPress}
            />
            <button onClick={onClick}>확인</button>
        </div>
    );
};

export default EventPractice;

 

결과