[REACT] react with typescript/ 리액트를 타입스크립트로 작성하기2탄 - 함수, useReducer

이전 글 보기

 

 

 

1. 함수의 타입 설정하기

함수에는 파라미터와 리턴타입을 지정해주어야한다.

특히나 input, form에서의 타입을 지정해보겠다.

import React, { useState } from 'react';

type MyFormProps = {
    onSubmit : (form : {name : string; description: string}) => void;
}

function MyForm({onSubmit}: MyFormProps){
    const [form , setForm] = useState({
        name: '',
        description : ''
    })

    const {name, description} = form;

    const onChange = (e:React.ChangeEvent<HTMLInputElement>) => {
        const {name, value} = e.target;
        setForm({
            ...form,
            [name] : value
        })
    }

    const handleSubmit = (e:React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        onSubmit(form)
        setForm({
            name : '',
            description : ''
        })
    }

    return(
        <form onSubmit={handleSubmit}>
            <input type="text" name='name' value={name} onChange={onChange} />
            <input type="text" name='description' value={description} onChange={onChange} />
            <button type="submit">등록</button>
        </form>
    )

}
export default MyForm;

이벤트의 타입은 함수에 hover 하면 vscode가 알려준다. 

이 코드에서 볼 수 있는 것은

1.  컴포넌트를 function키워드로 선언하고 props타입을 설정해준것

2. onChange, handleSubmit 함수에 파라미터의 타입을 지정해준 것

 

---

 

 

2. useReducer 사용하기

[Action타입 지정하기]

type Action = 
    | {type : 'SET_COUNT'; count : number}
    | {type : 'SET_TEXT'; text : string}
    | {type : 'SET_COLOR'; color : Color}
    | {type : 'TOGGLE_GOOD'}

action의 타입을 이렇게 정한다.

그리고 reducer에 넘겨주면 switch 문에서 저절로 추론을 해서 자동완성이 된다.

나는 useReducer을 사용해서 프로젝트를 해본적이 없어서

|부터 붙이는 형식은 처음봤는데 이렇게 써주면 된다고 한다. 

 

[State타입 지정하기]

type Color = 'red' | 'orange' | 'yellow';

type State = {
    count : number;
    text : string;
    color : Color;
    isGood : boolean;
}

State의 타입도 지정해준다.

그러면 역시나 타입 추론을 해서 state에 뭐가 들어있는지 자동완성이 된다.

 

 

[Reducer작성]

    
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('unhandled')
    }
}

reducer는 state를 위에서 지정한  State타입으로 가지고

action을 위에서 지정한 Action타입으로 가지고

State를 리턴한다.

 

 

 

다음편에 계속....

 

 

 

코드 출처 : https://react.vlpt.us/using-typescript/04-ts-context.html