[TodoApp개발일지 #3] 드디어 Recoil 이용! 조건부 랜더링해보자.

김유진·2022년 11월 17일
0

React

목록 보기
49/64
post-thumbnail

나의 Todo App에 어떤 전역상태 관리가 필요한지 고민을 해보았다.
고민 끝에 내가 전역상태로 관리해야 할 내용들은 아래와 같았다.

전역 state 관리는 무엇을 할 것인가?

날짜 (YYYY/MM/DD 형태로 저장할 예정이다.)

날짜를 전역상태로 관리하는 이유는 TodoApp의 목록을 날짜에 따라서 다르게 보이게 할 예정이기 때문이다.

현재는 모든 KEY를 TODO로 통일하였으며, 메인화면에 들어갔을 때 TODO 앱이 하나만 뜨기 때문에 이를 날짜에 따라서 차별화할 필요가 있었다. 그래서 localStorage에 저장할 때 KEY값을 날짜 값으로 저장하여 날짜에 따라서 조건부 랜더링을 진행할 수 있도록 할 예정이다.

또한, 날짜에 따라서 localStorage에 저장되는 diary내용도 있을 것이기 때문에 더더욱이 날짜를 전역값으로 관리해야 할 수 밖에 없었다.
날짜에 따라서 랜더링되는 TODO앱과 diary의 내용, 그리고 저장되는 방식도 달라지기 때문일 것이다.

현재 일기작성하는 곳은 단순하게 메인화면에서 <일기 작성하기>를 누르면 textarea가 나타나도록 만들었을 뿐이다.

날짜에 따라서 TODOAPP의 내용, 날씨를 불러오는 API, 일기의 내용도 달라기지 때문에 날짜에 따른 대대적인 리팩토링을 거쳐야 하는 것으로 보인다.

그래서 어떤 상태관리 tool을 이용할 것인가?

먼저 상태관리에 있어 고민하는 내용은 내가 아는 지식으로는 밑에가 한계이다..

Redux vs Recoil

사실 지난 멋사 프로젝트에서 Redux를 사용해보긴 했는데 복잡한 Store과 랜더링 과정에 대해서 완벽하게 이해하였다고 말하지 못하겠다 (...) 그래서 이번에 하는 김에 Redux를 이용해 보는 것을 다시 도전해 보고 싶었는데, 이번에 내가 구현하는 Todo App은 간단한 상태관리만이 필요하고, 사실상 Date에 대해서 관리하는 것이 전부이므로 Recoil를 새롭게 공부하면서 적용해보고자 한다.

아직 자잘하게 구현해야 하는 것들

  • 뒷 배경 시간에 따라서 아침/점심/저녁 배경화면 구현하기
  • 양 옆 사이드바 애니메이션 생성
  • 날짜를 key값으로 잡아 대대적인 리팩토링 및 조건부 랜더링 구현

0개의 댓글