[TS / React] React에서 TS 사용해보기

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

뒤에 --template typescript 붙이면 typescript가 포함된 리액트 폴더를 만들 수 있음

 

TS-REACT-TUTORIAL

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>
                <button onClick={onIncrease}>+1</button>
                <button onClick={onDecrease}>-1</button>
        </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;