[React] 버킷리스트와 체크리스트 만들기

마이리스트를 모달로 구현할까?

useRef를 사용해 직접 dom에 접근을 지양하는 것이 좋다는 것을 알게 된 후 useState를 이용하여 리스트를 모달로 만들었다.

하지만, 한 페이지에 투두리스트 모달 창을 두 개 이상 만드는 것은 사용자 경험에 좋지 못하다는 생각이 들었다.

마이페이지에서 구현한 모달 창을 없애고, 마이리스트 페이지로 옮겨 작업을 완료했다.

json-server로 CRUD 확인하기

json-server를 통해 get, post, patch, delete가 잘 작동했었다. 실제 백엔드 api로 마이리스트 페이지를 구현했을 때, 생각보다 많은 코드를 수정해야 했다..

2~3일 동안 서버 통신을 마무리해서 프로젝트 발표를 해야하는데, 마이리스트 페이지에 모든 시간을 쏟아 부울 순 없었다는 생각에 걱정만 앞섰다.

다행히도!!!

팀원들과 함께하여 빠르게 마이리스트 페이지를 구현할 수 있었다.😘

아래 코드를 통해서 간단하게 살펴보겠습니다.

1. 리스트 등록하기

// checkInput.js

  const onFormSubmit = async (event) => {
    event.preventDefault();
    setTodos([...todos, { checkContent: input, isCheck: completed }]);
    setInput("");

    const todoPost = {
      checkContent: input,
      isCheck: false,
    };

    await axios
      .post(`${process.env.REACT_APP_API_URL}check-list`, todoPost)
  };

    ...

  return (
    <>
      <InputContainer width="424px" height="36px">
        <form onSubmit={onFormSubmit} className="form">
          <Input type="text" value={input} required onChange={onInputChange} />
          <Button type="submit">
            <AiOutlinePlusCircle className="add" color="5E5E5E" size="18" />
          </Button>
        </form>
      </InputContainer>
    </>
  );

2. 리스트 완료버튼 클릭하기

// checkList.js

const handleComplete = async (todo) => {
  setTodos(
    todos.map((item) => {
      if (item.id === todo.checkId) {
        return { ...item, isCheck: !item.isCheck };
      }
      return item;
    }),
  );

  const todoPatch = {
    checkContent: todo.checkContent,
    isCheck: !todo.isCheck,
  };

  await axios.patch(`${process.env.REACT_APP_API_URL}check-list/` + todo.checkId, todoPatch);
};

return (
  <>
    {todos.length > 0 &&
      todos.map((todo, idx) => (
        <li className="list-item" key={idx}>
          <Container>
            <button onClick={() => handleComplete(todo)} className="complete-icon">
              {todo.isCheck ? '🔳' : '⬜'}
            </button>
          </Container>
        </li>
      ))}
  </>
);

3. 리스트 삭제하기

// checkList.js

const handleDelete = async (check) => {
  await axios.delete(`${process.env.REACT_APP_API_URL}check-list/` + check.checkId);
};

return (
  <>
    {todos.length > 0 &&
      todos.map((todo, idx) => (
        <li className="list-item" key={idx}>
          <ButtonContainer>
            <MintButton width="50px" height="20px" onClick={() => handleDelete(todo)}>
              삭제
            </MintButton>
          </ButtonContainer>
        </li>
      ))}
  </>
);

결과적으로

오른쪽에 있는 버킷리스트도 체크리스트와 마찬가지로 동일하게 동작한다.

추후에 typescript와 tailwindCSS로 리팩토링하면서 마이리스트 페이지에 달력을 추가하고, 리스트를 수정할 수 있게 버튼을 추가할 예정이다.