<step88>'react_typescript_interface, keyof, Generic'

1)

typescript 적용

npx create-react-app ts-react-tutorial --template typescript

src/

Counter.tsx

import React, { useState } from 'react';

const Counter = () => {
    const [ count, setCount ] = useState<number>(0);
    const onIncrease = () => setCount(count+1);
    const onDecrease  = () => setCount(count-1);
    return (
        <div>
            <h1>{count}</h1>
            <div>
                <button onClick={onIncrease}>+1</button>
                <button onClick={onDecrease}>-1</button>
            </div>
        </div>
    );
};

export default Counter;

MyForm.tsx

import React, { useState } from 'react';

const MyForm = () => {
    const [ form, setForm ] = useState({
        name: "",
        description: ""
    });
    const { name, description } = form;
    const onChange = (e:any) => {
        const { name, value } = e.target;
        setForm({
            ...form,
            [name]: value
        })
    }
    const handleSubmit = (e:any) => {
        e.preventDefault();
        setForm({
            name: "",
            description: ""
        })
    }
    return (
        <form onSubmit={handleSubmit}>
            <input name='name' value={name} onChange={onChange}/>
            <input name='description' value={description} onChange={onChange}/>
            <button type="submit">등록</button>
        </form>
    );
};

export default MyForm;