[TIL] 2021 10 06 / 리액트 심화주차

오늘은 리액트 심화주차 6일차

어제 계획했던 기능은 무사히 구현을 끝내서 매우 뿌듯하다 ㅎㅎ

강의 들으면서 따라치는 것보다 확실히 새로운 걸 만들어보는게 재밌었다.

오늘 기억에 남는 것들은

• 파이어베이스 버전 8 or 9 때문에 2~3시간은 설정하느라 날려먹은듯
• 모달창에서 삭제버튼을 누르면 → 창이 닫히고 → 리렌더링이되면서 일정이 사라지도록 하고싶은데, 리렌더링이 되지 않았다. 그 이유는 파이어베이스에서 데이터가 삭제됬으면 데이터를 다시 가져와서 데이터를 load해줘야하는데 아마 load가 안되서였던것 같다. useEffect의 의존성 배열에 아무것도 안넣어줬기때문에 그런것 같아서 state를 넣어줬더니 콘솔창에서 무한렌더링이 되는것을 볼 수 있었다. → deleteFB 미들웨어 함수에서 파이어베이스에 저장된 데이터를 삭제하고, then 삭제가 완료되면 거기서 한번 더 getFB를 실행함으로써 해결되었다. 이 방법은 서버에 요청을 두배? 정도로 많이 보내기 때문에 서버에 데이터를 요청하는 비용이 많이 들 수도 있다. 지금은 작은 프로젝트라 괜찮지만
  
• 일정을 추가할때도 문제가 있었다. addFB 함수를 dispatch하면 파이어베이스에 데이터를 추가하고, 리듀서로 디스패치되어서 뷰에 데이터를 뿌려주도록 했는데 추가하기 버튼을 누르면서 route가 바뀌기 때문에 add action보다 set(load) action이 먼저일어나서 데이터가 두개씩 뷰에 뿌려지는 상황이 발생했다. → 원래는 라우터 이동을 컴포넌트에서 해줬기 때문에 비동기처리가 순서대로 되지 않았다. 그래서 리덕스 안에 addFB 미들웨어 함수에서 데이터를 추가하고, 추가가 완료되면 then 라우터이동을 하도록 해주었더니 해결되었다!
  
• 리덕스는 정말 어렵다.. 오늘 느낀 것은 비동기처리가 정말 중요하구나 느낄 수 있었다. 비동기처리에 대해서 더 공부해야겠당

내일 계획

• 일정 완료(Update) action 미들웨어 함수
• 뷰 수정하기
• 코드 다시 보면서 리팩토링?
• 요구사항 다시 보고 구현 안된 기능 있으면 구현하기
  • 일정 추가 페이지에서 일시, 내용 입력안하면 경고 띄우기