Refactoring

• 가장 먼저 코드가 작동하게 만든 뒤, 리팩토링을 해줍니다.
• TypeScript 활용 시 각각의 컴포넌트들을 나눠주면서 어느부분이 에러인지 보여주기 때문에 Refactoring 이 보다 수월하고 정확합니다.
  (TypeScript 가 없다면 Refactoring 작업에 소요되는 시간이 몇 배는 길어질 것 같습니다.)

폴더 및 파일정리

• 정리 전
  

• 정리 후
  

각 컴포넌트, 아톰 별로 나눠준 파일에 코드 찢어주기

// ToDoList.tsx

import { useRecoilValue } from "recoil";
import { toDoState } from "../atoms";
import CreateToDo from "./CreateToDo";
import ToDo from "./ToDo";

function ToDoList() {
  const toDos = useRecoilValue(toDoState); // const [x, setX] = useState(); 와 거의 비슷
  return (
    <div>
      <h1>To Dos</h1>
      <hr />
      <CreateToDo />
      <ul>
        {toDos.map((toDo) => (
          <ToDo key={toDo.id} {...toDo} />
        ))}
      </ul>
    </div>
  );
}

export default ToDoList

// atoms.tsx

import { atom } from "recoil";

export interface IToDo {
  text: string;
  id: number;
  category: "TO_DO" | "DOING" | "DONE";
}

export const toDoState = atom<IToDo[]>({
  key: "toDo",
  default: [],
});

// CreateToDo.tsx

import { useForm } from "react-hook-form";
import { useSetRecoilState } from "recoil";
import { toDoState } from "../atoms";

interface IForm {
  toDo: string;
}

function CreateToDo() {
  const setToDos = useSetRecoilState(toDoState);
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
    setValue,
  } = useForm<IForm>();
  const onValid = ({ toDo }: IForm) => {
    if (toDo.includes("게임")) {
      setError(
        "toDo",
        { message: "게임을 하면 안됩니다." },
        { shouldFocus: true }
      );
    }
    setToDos((oldToDos) => [
      { text: toDo, id: Date.now(), category: "TO_DO" },
      ...oldToDos,
    ]);
    setValue("toDo", "");
  };
  return (
    <form onSubmit={handleSubmit(onValid)}>
      <input
        {...register("toDo", {
          minLength: {
            value: 5,
            message: "too short",
          },
          pattern: {
            value: /^[ㄱ-ㅎㅏ-ㅣ가-힣0-9]/,
            message: "only korean & numbers",
          },
          validate: {
            noYoutube: (value) =>
              value.includes("유튜브") ? "유튜브를 보면 안됩니다." : true,
          },
        })}
        placeholder="Write a to do"
      />
      <button>Add</button>
      <span>{errors?.toDo?.message}</span>
    </form>
  );
}

export default CreateToDo;

// ToDo.tsx

import { IToDo } from "../atoms";

function ToDo({ text }: IToDo) {
  return (
    <li>
      <span>{text}</span>
      <button>To Do</button>
      <button>Doing</button>
      <button>Done</button>
    </li>
  );
}

export default ToDo;

사견

• 첫번째로 TypeScript 의 강력함을 강력하게 느꼈습니다. Refactoring 과정에서 전혀 어려움 없이 TypeScript 에서 뭐가 잘 못 되있는지 알려주는 데로 차근차근 진행하니 코드를 컴포넌트 별로 나누는 데 어려움이 없었습니다.

• 두번째로 Recoil 로 인해서 버블(아톰) 을 여러 번 내려주는 방식이 아니라 어플리케이션 내에서 한 파일에 관리 해놓고 어떤 컴포넌트에서는 값만 가져다 쓰고, 어떤 컴포넌트에서는 상태만 변경 해주고 등으로 쓸 수 있는 것이 정말 간편하다고 느꼈습니다.

• 세번째로 아직 input 이 여러개인, 그리고 validation 이 중요한 form 태그 구성이 아니여서 그런지 react-hook-form 의 장점에 대해서 깊게 느끼진 못 햇지만 추후 필요할때 사용하기 위해서 익숙해 지려고 하고 있습니다.