To Do List #4 Enums

Enums

• https://www.typescriptlang.org/ko/docs/handbook/enums.html

열거형은 TypeScript가 제공하는 기능 중 하나입니다.
열거형으로 이름이 있는 상수들의 집합을 정의할 수 있습니다. 열거형을 사용하면 의도를 문서화 하거나 구분되는 사례 집합을 더 쉽게 만들수 있습니다. TypeScript는 숫자와 문자열-기반 열거형을 제공합니다.

숫자형 열거형

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

• 위 코드에서 up 을 1로 초기화된 숫자 열거형을 선언하면,
  up 뒤에서부터는 자동으로 1씩 증가된 값을 가진다.
  즉 Direction.Up 은 1, Down 은 2, Left 는 3, Right 은 4 을 값으로 가짐

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

• 위 경우 Up 값은 0, Down 은 1 이 된다. 자동 증가하는 기능은 멤버 값 자체에는 신경 쓰지 않지만, 각 값이 같은 열거형의 다른 값과 구별돼야 하는 경우에 유용

사용 방법 : 그냥 열거형 자체에서 프로퍼티로 모든 멤버에 접근하며, 열거형의 이름을 사용해 타입을 선언합니다.

문자열 열거형

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

• 문자열 열거형은 숫자 열거형처럼 자동-증가하는 기능은 없지만, “직렬화”를 잘한다는 이점이 있습니다. 다시 말해서 만약 당신이 숫자 열거형을 이용해서 디버깅하고 있고 그 값을 읽어야 한다면, 종종 그 값이 불확실한 경우가 있습니다 - 숫자만으로는 이것이 어떤 의미인지 유의미한 정보를 제공해주지 않기 때문입니다. (역 매핑 을 이용하면 도움이 될지라도 말입니다), 반면 문자열 열거형을 이용하면 코드를 실행할 때, 열거형 멤버에 지정된 이름과는 무관하게 유의미하고 읽기 좋은 값을 이용하여 실행할 수 있습니다.

• 즉, 숫자가 아닌 열거된 문자에 정말 문자 그대로의 값이 들어가야할 때 문자열거형을 사용하면 된다는 것 같다.

Enums 적용

• category 이름( "TO_DO", "DONE" ..) 을 직접 타이핑 할 경우
  매번 입력해주기도 귀찮고.. 오타로 인해 오류가 나는 등의 이유로 빡칠 수 있으니 enum 으로 선언해주자.

-- atoms.tsx

export enum Categories {
  "TO_DO" = "TO_DO",
  "DOING" = "DOING",
  "DONE" = "DONE",
}

• 그럼 이렇게 자동완성으로 사용해줄 수 있다.

// 적용 2

// 기존코드
{category !== "DONE" && (
  <button name="DONE" onClick={onClick}>

// enum 적용 후
{category !== Categories.DONE && (
  <button name={Categories.DONE} onClick={onClick}>

• good!
• 추가로, toDo 의 카테고리가 categoryState 에 따라서 추가될 수 있도록 코드를 약간 수정했다.

-- atoms.tsx

export const categoryState = atom<Categories>({
  key: "category",
  default: Categories.TO_DO,
});

-- CreateToDo.tsx

function CreateToDo() {
  const setToDos = useSetRecoilState(toDoState);
  const category = useRecoilValue(categoryState);  <<<----
  const { register, handleSubmit, setValue } = useForm<IForm>();
  const handleValid = ({ toDo }: IForm) => {
    setToDos((oldToDos) => [
      { text: toDo, id: Date.now(), category }, 
      ...oldToDos,
    ]);
    setValue("toDo", "");

• ㄹㅇ DONE!!!!!