[TIL]231222_Typescript로 Todo 만들기

👩🏻‍💻 Today Learn

• 알고리즘 스터디
• 스탠다드반 수업

💡 알게된 내용

Typescript를 사용하여 TodoList 만들기

3단계였던 json-server에서 5단계인 react-query로 리팩터링 하던 중 기능이 고장나버렸었다.

CRUD관련된 api파일을 만들었는데 추가, 삭제, 수정 부분에서 전달할 값들을 적어주지 않았었던 것이다.
수정 후 코드는 아래와 같다.

// 가져오기
const fetchTodos = async (): Promise<todoData[]> => {
  const response = await axios.get<todoData[]>(
    `${process.env.REACT_APP_SERVER_URL}/todos`
  );
  return response.data;
};

// 추가
const addTodos: (newtodo: todoData) => Promise<void> = async (
  newtodo: todoData
) => {
  await axios.post<todoData>(
    `${process.env.REACT_APP_SERVER_URL}/todos`,
    newtodo
  );
};

// 삭제
const deleteTodos = async (id: string): Promise<void> => {
  await axios.delete<todoData>(
    `${process.env.REACT_APP_SERVER_URL}/todos/${id}`
  );
};

// 수정
const updateTodos = async ({
  id,
  isDone,
}: {
  id: string;
  isDone: boolean;
}): Promise<void> => {
  await axios.patch<todoData>(
    `${process.env.REACT_APP_SERVER_URL}/todos/${id}`,
    {
      isDone: !isDone,
    }
  );
};

그리고 Typescript이기 때문에 전달받는 부분에서 그 값들이 어떤 타입인지 명시해주어야 한다.

// 수정하는 부분을 예시로 가져왔다
const switchButtonHandler = ({
    id,
    isDone,
  }: {
    id: string;
    isDone: boolean;
  }): void => {
    updateMutate.mutate({ id, isDone });
  };

map() 으로 화면에 그려주는 부분에서 todoData 의 요소를 구조분해할당으로 가져와서 넣어줬다.

 ?.map(({ id, title, contents, isDone }: todoData) => {
              return (
                <StTodoBox key={id}>
                  <StTitle>{title}</StTitle>
                  <Stcontent>{contents}</Stcontent>
                  <StButtonWrap>
                    <Button
                      type="button"
                      onClick={() => {
                        switchButtonHandler({ id, isDone });
                      }}
                    >
                      {isActive ? "취소" : "완료"}
                    </Button>

해당 부분은 튜터님께 질문드리러 갔다가 처음 해본 방식이었다.

 ?.map((todo: todoData) => {
              return (
                <StTodoBox key={todo.id}>
                  <StTitle>{todo.title}</StTitle>
                  <Stcontent>{todo.contents}</Stcontent>

대부분 이런식으로 작성해왔었기 때문이다!

✍🏻 회고

앞으로 남은 과정은 프로젝트 뿐인데 프로젝트를 진행하면서, 그리고 프로젝트가 끝이 난 후에도 이론적으로 공부하고 익혀야할 내용이 산더미이다.
그래도 당장 눈앞에 일들을 하나씩 해결해나가는 것이 중요하니 남은기간도 힘차게 달려보자!