📃구현 CheckList!!
- 요청 내역 카드 불러오기
- 토글 필터링
- 체크박스 필터링
- 사이드바 슬라이드
| 카드 불러오기 | 토글 필터링 |
|---|---|
 |  |
| 체크박스 필터링 | 사이드바 |
 |  |
📖회고 내용
리덕스 툴킷 적용
이번 과제에서 팀원들과 전역 상태관리에 도전하기 위해 리덕스 툴킷을 사용했다. 리덕스 툴킷을 사용하기까지 많은 회의를 진행했다. 회의의 최종 고민은 리덕스를 사용하는 이유와 리덕스를 사용한다면 제한 시간(2일) 동안 잘 도입할 수 있는가였다.
리덕스를 사용해도 되느냐는 주제를 가지고 1시간 동안 과제를 보면서 팀원들과 이유를 찾았다. 결론은 리덕스가 필요하다였다. 그 이유는 필터링하는 과정에서 상태변경과 Prop Drilling이 있어서 리덕스를 선택하게 됐다.
다음으로는 리덕스를 어떻게 도입하느냐였는데 결론은 제한 시간 내에 리덕스를 배우고 도입하기가 어려워 리덕스의 복잡함을 낮추고 상대적으로 배우기 쉬운 리덕스 툴킷을 선택하게 됐다. 전역상태관리 Recoil, ContextAPI가 있었지만 리덕스툴킷을 적용해 보고 비동기 처리하는 Redux-thunk, Redux-saga의 러닝커브를 낮추기 위해 선택한 이유도 있었다.
필터링 문제
리덕스툴킷을 처음 도입해 보기 때문에 팀원들과 라이브쉐어를 하며 페어프로그래밍을 진행했다. 페어프로그래밍을 하면서 가장 어려웠던 점은 필터링 문제였다. 문제는 처음 렌더된 상태에서 필터링은 잘 작동하지만, 초기화를 했을 때 기존 전체 태그가 필터 되면서 태그를 관리하는 상태가 변경됐기 때문에 초기화가 되지 않은 현상이었다.
회의를 통해 전체 태그 필터값을 컴포넌트에서 관리와 새로운 초기화된 상태 추가라는 의견이 나왔다. 결과적으로 우리팀은 후자를 선택하게 됐는데, 그 이유는 filterRequests라는 함수를 사용해서 상태를 변경해 주기 때문에 데이터 흐름의 통일성을 고려하여 선택하게 됐다. 그래서 렌더링 시 상태를 받아올 때 초깃값을 저장하는 상태를 만들어 초기화 상태를 잃지 않게 문제를 해결했다.
🌝느낀점
예전부터 리덕스를 사용해보고 싶었지만, 프로젝트가 작다는 이유로 다른 전역상태관리를 사용했지만, 이번에는 리덕스를 사용하는 의미를 만들어서 사용해보는 좋은 경험이었다. 물론 작은 프로젝트라면 useState, ContextAPI등을 사용하여 최소한으로 하면 되지만 항상 리덕스에 갈증이 있었기에 의미 있었다.
또한 필터링 관련 회의에서 나는 초기화된 필터값을 컴포넌트에서 관리하자는 의견이었지만 팀원들의 의견을 듣고 이해하며 다양한 방법을 함께 생각하는 소중함을 경험하게 됐다.