230620 투두리스트에 react-router-dom 적용하기

230620 투두리스트에 react-router-dom 적용하기

 

router 구조

현재 투두리스트 앱이 가지고 있는 경로는 두 가지이다.

1. 홈: 투두리스트가 보이는 메인페이지
2. 투두 상세 페이지: 투두리스트에서 하나의 투두를 눌렀을 때 이동되는 상세 페이지

처음에는 경로 별로 두 가지 페이지 컴포넌트를 만들어서 적용했다.

그랬더니 모달이 열리고 닫힐 때 페이지가 이동되면서 <TodoApp/> 컴포넌트가 다시 마운트 되는 문제가 발생했다

TodoItem에 css transform 속성이 적용되어 있기 때문에 전부 다시 사라졌다가 다시 나타나고 재배열 되었다.

그래서 각각 경로에 같은 <TodoApp/>을 줘봤는데, 나름 괜찮게 작동해서 이렇게 사용했다.

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<TodoApp />} />
        <Route path="/todo/:id" element={<TodoApp />} />
      </Routes>
    </BrowserRouter>
  );
};

 

모달 열기 -> 상세 페이지로 이동

모달 여는 버튼을 react-router-dom의 Link로 구현

<IconButton 
  onClick={handleEditButton} 
  className='todoItem__editBtn'
  role='할일 편집을 위해 모달 열기'
>
  <Link to={`/todo/${id}`}>
  <LuEdit/>
  </Link>
</IconButton>

 

모달 닫기 -> 홈으로 이동

모달 닫는 버튼의 클릭 이벤트로 navaigate('/')을 통해 홈으로 이동

const endEditTodo = () => {
 navigate('/')
}