<step89>'react_ts_counter, ReducerSample'

1)

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;

 

2)

Counter_Reduce.tsx

import React, { useReducer } from 'react';

// 액션타입과 리듀서 함수 생성
// 액션을 | 로 연달아서 쭉 나열함
type Action = { type: 'INCREASE' } | { type: 'DECREASE' }

function reducer(state: number, action: Action): number {
    switch(action.type) {
        case 'INCREASE':
            return state+1;
        case 'DECREASE':
            return state-1;
        default:
            throw new Error('없는 액션 타입입니다.');
    }
}
const Counter_Reduce = () => {
    const [ count, dispatch ] = useReducer(reducer,0);
    const onIncrease = () => dispatch({type: 'INCREASE'});
    const onDecrease = () => dispatch({type: 'DECREASE'});
    return (
        <div>
            <h1>{count}</h1>
            <div>
                <button onClick={onIncrease}>+1</button>
                <button onClick={onDecrease}>-1</button>    
            </div>        
        </div>
    );
};

export default Counter_Reduce;

 

3)

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;

 

4)

ReducerSample.tsx

import React, { useReducer } from 'react';

type Color = 'red' | 'orange' | 'green'
type State = {
    count: number;
    text: string;
    color: Color;
    isGood: boolean;
}
type Action = {type: 'SET_COUNT'; count: number}
 | {type: 'SET_TEXT'; text: string}
 | {type: 'SET_COLOR'; color: Color}
 | {type: 'TOGGLE_GOOD';}

 function reducer(state: State, action: Action) : State {
    switch(action.type){
        case 'SET_COUNT':
            return {
                ...state,
                count: action.count
            }
        case 'SET_TEXT':
            return {
                ...state,
                text: action.text
            }
        case 'SET_COLOR':
            return {
                ...state,
                color: action.color
            }
        case 'TOGGLE_GOOD':
            return {
                ...state,
                isGood: !state.isGood
            }
        default:
            throw new Error('액션이 없어요.');
    }
 }
 const ReducerSample = () => {
    const [ state, dispatch ] = useReducer(reducer, {
        count: 0,
        text: 'Hello',
        color: 'red',
        isGood: true
    });
    const setCount = () => dispatch({type: 'SET_COUNT', count: 5});
    const setText = () => dispatch({type: 'SET_TEXT', text: 'bye'});
    const setColor = () => dispatch({type: 'SET_COLOR', color: 'orange'});
    const toggleGood = () => dispatch({type: 'TOGGLE_GOOD'});
    return (
        <div>
            <p>
                <code>count : </code> {state.count}
            </p>
            <p>
                <code>text : </code> {state.text}
            </p>
            <p>
                <code>color : </code> {state.color}
            </p>
            <p>
                <code>isGood : </code> {state.isGood ? 'true' : 'false'}
            </p>
            <div>
                <button onClick={setCount}>setcount</button>
                <button onClick={setText}>settext</button>
                <button onClick={setColor}>setcolor</button>
                <button onClick={toggleGood}>togglegood</button>
            </div>
        </div>
    );
};

export default ReducerSample;