기존 프로젝트 Git 주소

기존 자바스크립트로된 리액트 프로젝트 todo-list를 리팩토링한 과정이고,

변경된 내역을 살펴보면서 알아갔던 타입(키워드)들을 같이 소개해 보겠다.

---

주요 변경된 코드

현재 리팩토링을 진행하는 과정에서는 Custom Hook, Tanstack Query(React Query) v5, axios, json-server가 포함된 프로젝트이다.

enum queryKey {
  TODO = 'TODO',
}

export const useTodos = () => {
  const queryClient = useQueryClient();
  const { __getTodos, __addTodos, __updateTodos, __deleteTodos } = useAxios();

  const { data: todos, isLoading } = useQuery({
    queryKey: [queryKey.TODO],
    queryFn: __getTodos,
  });

  const addTodoMutation = useMutation({
    mutationFn: __addTodos,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [queryKey.TODO] });
    },
  });

  // ...

};

해당 커스텀 훅에선 크게 변경된 부분은 없지만 최상단 부분에 enum 타입을 사용했는데 나중엔 쿼리 키가 많아지면 따로 분리해서 보관할 예정이지만 예행연습이라 생각하고 미리 적용해봤다.

enum

enum 타입이란 일종의 구조체를 만드는 타입으로 자바스크립트 객체와 비슷한 모양새이지만 타입스크립트는 각 멤버 값을 추론한다.

또한, 각 멤버에 명시적으로 값을 할당할 수도 있고 일부 멤버에 값을 직접 할당하지 않아도 타입스크립트는 누락된 멤버를 이전 멤버의 값의 숫자를 1씩 늘려가며 자동으로 할당해준다.

주로 문자열 상수 를 생성하는데 사용된다.

enum ItemStatusType {
  DELIVERY_HOLD = "DELIVERY_HOLD", // 배송 보류
  DELIVERY_READY = "DELIVERY_READY", // 배송 준비 중
  DELIVERING = "DELIVERING", // 배송 중
  DELIVERD = "DELIVERD" // 배송 완료
}

const checkItemAvailable = (itemStatus: ItemStatusType) => {
  switch (itemStatus) {
    case ItemStatusType.DELIVERY_HOLD:
    case ItemStatusType.DELIVERY_READY:
    case ItemStatusType.DELIVERING:
      return false;
    case ItemStatusType.DELIVERD:
    default:
      return true;
  }
}

위 예시 코드처럼 열거형을 타입으로 가진다. 이를 통해 얻을 수 있는 효과는 itemStatus 의 타입이 문자열로 지정된 경우와 비교했을 때,

타입의 안전성 , 명확한 의미 전달, 가독성 을 확보할 수 있다.

interface

export interface Todo {
  id: string;
  title: string;
  content: string;
  isDone: boolean;
}

// 사용 예시
import { Todo } from '../types/goodType';
value: Todo

흔히 객체를 타이핑 하기 위해 type 과 interface 키워드를 자주 사용한다.
해당 키워드를 사용하면 object 형태로 되어 있는 중복 코드를 해당 타입으로 한 번에 해결이 가능하다.

그 중 나는 리팩토링 과정에서 interface 를 선택한 이유는 Todo 라는 객체가 전역적으로 많은 곳에서 쓰이다 보니 interface 를 사용했고 만약에 지정된 곳에서만 쓰이는 객체이면 아마도 type 을 사용할 것 같다.

결국 둘 다 쓰일 키워드들이다.

그 외로는 추가적으로 리팩토링 작업을 진행 중이다. 🔥