투두리스트 간단한 구조 개편

TodoList를 처음에 생각했을 때는 페이지 하단부에 따로 넣을 것이 없을 것이라고 생각했습니다. 그래서 Footer 부분에 고려를 하지 않은 채 시작했는데요

 

하지만 완료 모달 버튼이 페이지의 하단부에 들어가게 되면서, 임시방편으로 사진처럼 최상위 태그에 그냥 바로 썼습니다. 

 

더 많은 기능을 구현할 가능성도 있기에, 나중을 위해서 간단하지만 구조를 개편해 볼 거예요

 

 

 

 

요렇게 footer 컴포넌트를 추가할 거예요

 

 

 

기존의 코드를 그대로 옮겨서 Footer 컴포넌트를 새로 생성했습니다.

 

 

 

최상위 컴포넌트인 Home.jsx에서 Footer 컴포넌트를 불러옵니다. 이때 Footer 또한 Context를 통해 함수를 제공할 것이기에 TodoContext.provider 컴포넌트 내부에 넣었습니다.

 

또한 Footer에서 사용할 핸들러들을 Provider의 value에 넣었어요

 

 

 

마지막으로 TodoContext가 제공하는 핸들러를 사용하기 위해 useContext를 통해 해당 핸들러들을 불러오면 분리는 끝입니다.

 

 

 

진짜 마지막으로 Footer 컴포넌트의 CSS를 조정해서 끝 버튼을 다시 옮겨주면 끝입니다. 간단하네요