투두리스트 휴지통 만들기 (디자인 및 기초작업)

원래는 휴지통을 모달로 띄우려고 했으나, 페이지 라우팅 개념을 배운 김에 라우팅을 활용하기로 했습니다. 우선 휴지통을 만들기 전에 기초작업을 할 것입니다.

 

순서

1. 버튼 디자인

2. 페이지 라우팅

3. 쓰레기통 컴포넌트 디자인

4. useNavigate 활용

 

 

 

 

 

버튼 디자인

시작에 앞서 각 버튼에 사용할 UI를 먼저 디자인 했습니다. 쓰레기통을 그리는 김에, 완료 버튼을 대신할 물고기도 그려줬습니다.

 

버튼에 적용해봅시다

 

 

 

하하 만족스럽네요

 

 

 

 

 

페이지 라우팅 

우선 간단하게 쓰레기통 컴포넌트를 만들어줍니다. 

 

 

 

그리고 페이지 라우팅 세팅을 해줍니다. /trash 경로로 들어가면 쓰레기통 컴포넌트가 렌더링 되도록 세팅해 줍니다.

 

 

 

 

/trash 경로로 이동시 쓰레기통 컴포넌트가 잘 렌더링 되는 것을 확인할 수 있습니다요

 

 

 

 

 

쓰레기통 컴포넌트 디자인



디자인은 위와 같이 구현했습니다. 복구, 지우기, 초기화, 홈까지 총 4개의 버튼이 존재합니다.

 

 

 

 

 

useNavigate 활용

useNavigate를 활용해서 Home 컴포넌트와 Trash 컴포넌트가 서로 이동할 수 있게 할 것입니다.

 

react-router로부터 useNavigate를 불러오고, goToHome 핸들러를 통해 '/'경로로 이동할 수 있게 설정합니다. 마지막으로 '홈으로' 버튼에 적용하면 끝입니다.

 

 

 

'홈으로' 버튼을 눌렀을 때, Home 컴포넌트로 이동되는 것을 확인할 수 있습니다. Home -> Trash 또한 똑같이 구현해 주면 됩니다.

 

 

 

 

 

이렇게 휴지통에 대한 기초작업은 완료했습니다. 이제는 로직을 구현하면 됩니다.