230103 TIL

커스텀 훅으로 CRUD 리팩토링하기

어제 배웠던 커스텀 훅을 통해 TodoInput 을 리팩토링 했는데, 나머지 Update 와 Delete 로직도 모두 리팩토링해보자.

• js

  const handleDeleteClick = () => {
    dispatch(deleteTodoList(id));
  };

  const handleToggleClick = () => {
    dispatch(toggleTodoList({ id, isDone }));
  };

-- html

<TodoContainer>
  <H3>{title}</H3>
  <BtnContainer>
    <StyledBtn
               onClick={() => {
      handleToggleClick();
      }}
      >
      {isDone ? "Cancel" : "Done"}
    </StyledBtn>
    <StyledBtn
               onClick={() => {
      handleDeleteClick();
      }}
      >
      Delete
    </StyledBtn>
  </BtnContainer>
</TodoContainer>

최초의 update 와 delete 기능은 이렇게 구현이 되어있었다.
이제 커스텀 훅에 js 부분을 긁어와보자. (기존에 있는 useAddTodo 컴포넌트 이름을 useTodo 로 바꿔서 사용했다.)

• 커스텀 훅

const deleteTodo = (id) => {
    dispatch(deleteTodoList(id));
  };

  const toggleTodo = (id, isDone) => {
    dispatch(toggleTodoList({ id, isDone }));
  };

  return { todoItemValue, onChange, addTodo, deleteTodo, toggleTodo };

굉장히 간단한 로직들이라 커스텀 훅에 추가하는 것도 굉장히 간단했다. (그냥 긁어오면 됨)
그 후 return 값에 deleteTodo, toggleTodo 를 내보내주면 커스텀 훅 추가하기 끝

이제 우리가 만든 커스텀 훅을 사용해보자

• js

const { deleteTodo, toggleTodo } = useTodo();

• html

 <TodoContainer>
   <H3>{title}</H3>
   <BtnContainer>
     <StyledBtn
                onClick={() => {
       toggleTodo(id, isDone);
       }}
       >
       {isDone ? "Cancel" : "Done"}
     </StyledBtn>
     <StyledBtn
                onClick={() => {
       deleteTodo(id);
       }}
       >
       Delete
     </StyledBtn>
   </BtnContainer>
</TodoContainer>

useTodo 에서 쓸 함수들을 가지고 오고, 그녀석들을 버튼에 넣어주면 된다.
단, 함수의 파라미터로 재료를 넣어주는 것을 잊지 말 것.

이것으로 리팩토링이 끝났다.

너무나도 간단하지만 강력한 기능이라고 생각한다...

내일 선발대 강의가 기대된다