[WIL] 내일배움캠프 여덟째 주_Redux-Thunk 이해하기

거의 3주 가까이 React -> Redux -> Thunk(DB 사용) 단계를 거치면서 리액트를 배우고 있다. 처음 시작할 때만 해도 이렇게 지겹도록 투두리스트를 보게 될 줄은 몰랐는데 그래도 처음과 비교하면 어느새 수정 기능도 생기고 내 투두리스트가 점점 진화하고 있는 거 같다. 

 

thunk 함수와 axios를 이용해서 투두리스트를 구현할 때 어려웠던 부분은 서버와 통신해서 데이터를 가져오고, 또 그 데이터를 state에 넣기까지 공백이 생긴다는 점이었다. 만약 데이터를 가져오는 데 성공한다고 하면 세 단계를 거치는데 일단 initialState에 설정해놓은 todos의 빈 배열이 pending을 거쳐서 fulfilled 단계에 갔을 때만 빈 배열 안에 서버의 데이터가 채워지기 때문에 이것을 위해 추가해야 할 부분이 있었다. 

 

메인페이지에 그냥 전체 데이터를 불러올 때는 문제가 없지만 디테일 페이지에서 특정 id를 가진 데이터 하나만 불러오려면 그 find 메서드로 특정 id를 가진 객체를 찾는 과정에서 undefined를 반환하며 에러가 발생하기 때문에 이를 위해서 optional chaining을 여기저기 붙여줘야 했다. 

 

사실 이번 리액트 프로젝트를 준비하면서  팀 내부에서 리액트 쿼리를 써보는 게 어떠냐는 논의가 나왔고, 그래서 간단하게 쿼리 강의를 들어봤는데 redux와 thunk에 비해 너무 간단한 방법이라 깜짝 놀랐다. 그럼에도 불구하고 계속 thunk를 사용하기로 한 것은 이번 프로젝트를 통해 redux 그리고 state 관리하는 것에 더욱 익숙해지기 위함이었다. 확실히 프로젝트까지 redux-thunk로 진행하면서 state에 대해 깊이 이해할 수 있었다.

 

https://todolist-six-rho.vercel.app/

redux-thunk를 이용해 구현한 투두리스트를 배포하는 데 드디어 성공했다!

서버는 Glithch를 이용해서 배포했고 프로젝트 배포는 Vercel을 이용했다.

 

 

 이번 주의 TIL 목록 

[TIL] 내일배움캠프 React 과정 2022.12.19

[TIL] 내일배움캠프 React 과정 2022.12.20

[TIL] 내일배움캠프 React 과정 2022.12.21

[TIL] 내일배움캠프 React 과정 2022.12.22

[TIL] 내일배움캠프 React 과정 2022.12.23

[TIL] 내일배움캠프 React 과정 2022.12.24

[TIL] 내일배움캠프 React 과정 2022.12.25