클론코딩 #13 | To-Do List 만들기 (7) (Immutability, Recoil)

Immutability

• Rule : state 를 mutate 하면 안되고 새로운 state 를 만들어야 합니다.
  1. id 로 to do 를 찾습니다.
  2. 새로운 to do(category 정보가 바뀐) 를 newToDo object 로 선언,할당 합니다.
• to do 가 기본적으로 array 이기 때문에 아래와 같은 방법으로 변환된 카테고리의 값을 할당해줍니다.
  (아래는 문자열의 배열, to do 는 object 의 array 입니다.)

// How to replace "mango" to "melon"

const food = ["pizza", "mango", "kimchi", "kimbab"];
const front = ["pizza"];
const back = ["kimchi", "kimbab"];
const finalPart = [...front, "melon", ...back];

• Immutable 을 추구하고 mutable 하지 않기 위해선 array 로 만들면 됩니다.

To Do List 에 적용

// ToDo.tsx

import React from "react";
import { useSetRecoilState } from "recoil";
import { IToDo, toDoState } from "../atoms";

function ToDo({ text, category, id }: IToDo) {
  const setToDos = useSetRecoilState(toDoState);
  const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    const {
      currentTarget: { name },
    } = event;
    setToDos((oldToDos) => {
      const targetIndex = oldToDos.findIndex((toDo) => toDo.id === id);
      const newToDo = { text, id, category: name as any };
      return [
        ...oldToDos.slice(0, targetIndex),
        newToDo,
        ...oldToDos.slice(targetIndex + 1),
      ];
    });
  };
  return (
    <li>
      <span>{text}</span>
      {category !== "TO_DO" && (
        <button name="TO_DO" onClick={onClick}>
          To Do
        </button>
      )}
      {category !== "DOING" && (
        <button name="DOING" onClick={onClick}>
          Doing
        </button>
      )}
      {category !== "DONE" && (
        <button name="DONE" onClick={onClick}>
          Done
        </button>
      )}
    </li>
  );
}

export default ToDo;

사견

• 안 그래도 요즘 알고리즘이나 자료구조, 코딩 테스트에 대해서 공부하는 것이 필요할까 고민하고 있었는데 배열의 값을 바꿔주는 것 같은 알고리즘 구조를 코딩에서 사용하는 걸 경험했으니 코딩 테스트 공부하는데에 더 동기부여 될 것 같습니다.
• 기본적인 JavaScript, TypeScript 에 대한 공부가 더 필요하다고 생각이 들었습니다.