TodoList 삭제∙수정하기

삭제하기는 쉽게 구현했다.
다만 삭제 후 rerendering이 일어나지 않아 실시간 반영이 안 된다는 점이 날 답답하게 할 뿐. 같은 데이터 흐름(이라고 표현하는 게 맞나)이 필요한 컴포넌트들이 분리되어 있고 이 둘을 연결해주는 일이 아직은 쉽게 안 떠오른다. 리액트 쿼리로 서버 실시간 통신 이걸 해주면 될 것 같긴 한데, 리팩토링 하면서 고민해봐야겠다.

수정하기 기능까지 마무리하고 전체 코드를 돌아보고 부족한 부분은 리액트 강의도 다시 들어보면서 코드를 좀 더 깔끔하고 가독성 있게 작성하기 위해 고민해야겠다.

삭제하기

새로고침을 해야 반영된다.

const onTodoDeleteHandler = async () => {
    try {
      await axios.delete(`http://localhost:8080/todos/${id}`, {
        headers: {
          Authorization: token,
        },
      });
    } catch (error) {
      console.log(error);
    }
  };

삭제 axios 요청 함수를 만들었고, 저 함수를 DEL 버튼 onClick 이벤트에 넣어주었다.
근데 삭제하면 바로 반영이 안 되고 한 번 새로고침을 해줘야 한다.
리액트 쿼리를 사용하면 서버 상태를 실시간으로 받아오니까 해결할 수 있을 것 같은데 리액트 쿼리 말고 다른 방법은 없는 걸까? 고민해보자🤔

수정하기

수정하기 기능 어떻게 구현할지 고민이 많았다.
수정하기 위해 새로운 페이지나 모달이나 영역을 보여주고 클릭된 투두 제목과 내용을 띄워야 하는데 이 부분을 생각하는 게 어려웠다.

UI 구현방법 고민

• 수정하기 버튼을 클릭하면 모달이 뜨거나 창이 늘어나면서 수정하는 부분이 뜨게 한다.
• 모달이나 창 늘어남 없이 보고 있는 UI에서 수정할 수 있도록 뭔가(??)를 한다.

창이 늘어나게 하면서 투두 수정 영역을 띄우는 건 CSS 고수 트릭이 필요할 것 같은 그런 느낌에 일단 패스하고, 강의에서 모달을 띄우는 것을 배운 적이 있어서 수정 모달을 띄워보기로 했다.

수정이 까다롭게 느껴졌던 이유😹

• 모달을 띄우면서 이전 상태의 제목과 내용을 그대로 띄워야 함
• 모달을 띄웠을 때, 제목과 내용이 수정이 가능한 상태여야 함 즉 input 태그로 해야 할 것 같음
• 안에 제목과 내용을 그대로 띄우면서 수정된 변경 사항을 어떻게 실시간으로 반영하지 고민됨

그래서 수정 기능 어떻게 구현했냐면🤔

// TodoDetail 컴포넌트 
const [title, setTitle] = useState('');
const [detail, setDetail] = useState('');

// EditModal 

<EditModal isTrue={show}>
   <header>
     <h2>Rewrite your todo</h2>
   </header>
   <form>
     <label htmlFor="title">TODO</label>
     <input
       type="text"
       id="title"
       value={title}
       onChange={newTodoHandler}
     />

     <label htmlFor="detail">DETAIL</label>
     <input
        type="text"
        id="detail"
        value={detail}
        onChange={newTodoHandler}
     />
   </form>
   <footer>
      <button onClick={hideModalHandler}>UNDO</button>
      <button onClick={onTodoEditHandler}>DONE</button>
   </footer>
</EditModal>

에러 모달을 띄우고 사라지게 하기 위해 css에서 사용할 boolean값을 useState로 관리한다. 이 state를 변경하는 함수는 TodoDetail컴포넌트에 있는 EDIT 버튼 onClick함수에 넣어두었다.

그리고 이 TodoDetail 컴포넌트에서 리스트를 클릭했을 때 보이는 title과 detail을 title, detail이란 변수로 useState를 이용해 관리하고 있는데 모달을 띄우면서 input 태그에 value 값으로 클릭한 투두의 title과 detail을 넣어주어 클릭한 투두의 내용을 띄웠다.
그리고 onChange이벤트에서 title과 detail을 set함수로 변경해주고
수정된 todo값을 axios put 요청을 보내서 수정할 수 있도록 했다.

처음에 이 기능을 구현하고 수정된 사항이 바로 반영돼서 신기했는데 왜 그럴까 생각을 해봤더니 그냥 같은 state값을 사용하고 set함수로 변경했기 때문에 당연히 일어나는 일이었다.

처음 만들어볼 때보다는 확실히 실력이 늘긴 한 것 같은데, 리팩토링 해나가는 과정에서 또 많이 배울 것 같다!