첫 밸로그 글이고 글을 자주 안써서 못 쓰는 점 감안하고 읽어주세요.
우선 typescript를 적용하기 이전의 react(useReducer)의 사용법부터 알아보겠습니다.
// reducer
const reducer = (state, action) => {
switch (action.type) {
case "add":
return [...state, { text: action.text, complete: false }];
case "remove":
return state.filter((_, i) => action.idx !== i);
default:
return state;
}
}
// Todo
const Todo = () => {
const [todos, dispatch] = useReducer(reducer, [{// todos: 값에 접근, dispatch: 값 경
text: "Do homework",
complete: true
}, {
text: "Buy some food",
complete: true
}
]);
// dispatch
const addTodo = () => {
dispatch({ type: "add", text: "..." });
}
}
위와 같은 형태이다.
이제 타입스크립트를 적용했을 때를 비교해보자
// type -> 타입스크립트에서는 인자나 props으로 쓰이는 타입들을 interface 또는 type 키워드로 미리 정의를 한다.
type Actions =
| { type: "add"; text: string }
| {
type: "remove";
idx: number;
};
interface Todo {
text: string;
complete: boolean;
}
type State = Todo[]; // reducer에 쓰일 State는 todo 타입의 배열이므로 Todo[]로 타입을 지정
// 또는 Array(Todo)로 사용 가능
// reducer, reducer만 보아도 된다.
const reducer = (state: State, action: Actions) => {
switch (action.type) {
case "add":
return [...state, { text: action.text, complete: false }];
case "remove":
return state.filter((_, i) => action.idx !== i);
default:
return state;
}
}
// Todo
// ...
// dispatch
// ...
기본적으로 ts를 적용한 react나 기본 react나 형식은 같다.
다만 타입을 지정할 때 reducer에서 사용할 모든 타입들을 다 정의해야 한다는 불편함이 있다.
(불편함이 있는 만큼 확실한 성능?이 보장된다.)