wanted-preonboarding-team-8/pre-onboarding-9th-2-8

원티드 프리온보딩 2차 과제

pre-onboarding-9th-2-8's Issues

상태관리 라이브러리에 대하여

2023.03.07 PM 19:00회의에서 상태관리 관련하여 3가지 선택지가 있었습니다. 그 중 2가지는 아래와 같은 이유로 기각되었습니다.

1. Redux: props drilling 문제가 발생할 정도로 프로젝트 규모가 크지않아서 기각
2. React Query: 서버와의 통신이 없기에 굳이 사용할 이유가 없다 판단

그렇게 상태관리 라이브러리를 사용하지 않기로 하고, 몇 분은 ContextAPI를 사용한다 하셨던걸로 기억합니다.. 저는 localStorage를 사용해보려 했습니다. 하지만 진행하다 보니 상태 관리 라이브러리가 필요하다 판단되어 이슈를 남깁니다. 이유는 아래와 같습니다.

Context API의 렌더링 이슈

아마 Context API 예제를 찾아보면 대부분이 테마, 로그인 정보 같은 정도로 사용하고 있는 것을 보셨을겁니다. 이는 Context API가 예전부터 렌더링 이슈가 있어왔습니다. Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value가 바뀔 때마다 다시 렌더링 됩니다. 즉 직접 context를 사용하지 않는 부분까지 리렌더링 됩니다. 때문에 업데이트가 자주 필요한 부분에 권장되지 않습니다.

관련 링크

• 리액트 공식문서 Context API
• Context API는 왜 쓰고, 그렇다면 Redux는 필요없을까?
• 언제 context API를 사용하고 언제 zustand나 redux를 사용할까요?
• 초보자를 위한 리액트 Context - 완벽 가이드 번역

localStorage

저의 경우는 ContextAPI의 렌더링 이슈 때문에 로컬스토리지를 사용해볼까 했습니다. 하지만 이는 state가 아니기에 적합하지 않습니다. (좀 늦게 깨달았습니다.)

결론

위와 같은 이유로 저는 리덕스를 사용해 장바구니를 구현하려 합니다. 회의에서 라이브러리를 사용하지 않기로 했는데 혼자 라이브러리를 쓰는 것은 옳지 못하다 생각되어 이슈로 남기겠습니다.

reservations page 구현 리스트

• 저장한 여행 상품의 리스트 보여주기
• 저장한 여행 상품 삭제
• 여행 상품의 구매 수량 변경
• 장바구니에 있는 여행 상품의 총 결제액 수를 계산하여 표시

상품 필터 기능 구현 리스트

main page내 상품 필터링 기능

• 가격 필터링 기능 (가격만 필터)
• 공간(지역) 필터링 기능 (공간만 필터)
• 다중 필터링 기능

main page 구현 리스트

• 여행 상품 정보 (mock JSON) 를 활용하여 여행 상품 정보 노출
• 리스트에서 노출해야 하는 정보: idx, name, mainImage, price, spaceCategory
• 예약 버튼 생성
• 예약 버튼 클릭 시 여행 상품 장바구니에서 사용 할 수 있도록 상품 데이터를 저장
• 여행 상품 정보 클릭 시 모달창을 통해 여행 상품을 자세히 안내
• 모달에서 노출해야 하는 정보: idx, name, mainImage, description, spaceCategory, price, maximumPurchases, registrationDate