[TIL] <2020.5.18> React + Typescript(useReducer)

이성진·2020년 5월 18일
0

TIL

목록 보기
1/9

첫 밸로그 글이고 글을 자주 안써서 못 쓰는 점 감안하고 읽어주세요.

우선 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에서 사용할 모든 타입들을 다 정의해야 한다는 불편함이 있다.
(불편함이 있는 만큼 확실한 성능?이 보장된다.)

profile
개발보다 회사 매출에 영향력을 주는 개발자

0개의 댓글