항해99 3주차 주특기 기본 - 날짜별 별점 누르기 + (캘린더 일기 만들기)

이 글은 회고록입니다.

 

항해99 3주차 주특기 기본주차의 2일차가 되었다.

Redux 상태관리와 DB 연결 , useEffect를 통한 렌더링을 완료시킨 상황이다.

 

오늘의 결과물을 대략 이렇다.

 

현재 상태관리하는 것은 날짜 데이터, 다이어리 데이터, 기분을 나타내는 하트 데이터 총 3가지이다.

DB 역시 이 데이터로만 구성되어있다.

 

캘린더 클릭 시 날짜의 State가 RootState 에 저장되며, 다른 날짜를 클릭 시 데이터가 dispatch된다.

 

 

글쓰기 컴퍼넌트는 모달을 이용했다.

하트를 클릭하거나 일기를 작성할 때 역시 State 가 RootState에 저장되며,

State는 event의 value가 변화될 때마다 변한다.

그리고 저장버튼을 클릭 시 홈 화면으로 넘어가고, 해당 데이터가 보인다.

 

하지만 window.location.reload() 형식으로 데이터를 새로고침 했기 때문에 다른 방법을 고안할 필요가 있다.

 

현재 React 커뮤니티에서는 window.location.reload 형식을 지양하고 useEffect 형식으로 새로고침하는 것을 추천한다.

또는 Redux Thunk 를 이용해 db에 변화가 일어날 시 effect를 주는 형태로 만들라고 한다.

 

월요일날 바로 작업에 들어갈 예정이다.

 

 

https://github.com/act99/hanghae-week3

GitHub - act99/hanghae-week3: hanghae-week3 / 항해 3주차 주특기 기본