컨버스 프로젝트 리뷰(3)

4. 매장 정보

잘한점 (배운점)

• 매장 정보 페이지는 Naver Map API를 이용한다. 구글에 검색해보니 React를 위한 react-naver-maps를 찾을 수 있었다. (npm 최고)
  Getting Started도 작성이 잘 돼있어 사용하기 어렵지않다.
  RenderAfterNavermapsLoaded과 NaverMap을 react-naver-maps에서 import 후 위 처럼 사용해주면 된다.
  물론, 내가 한 것이 Map을 띄우는게 전부는 아니다.
  지도 왼쪽에 검색창에서 매장 이름, 지역을 검색을 하면 실시간 filter가 되어 우측 지도에 해당하는 매장만 표시되도록 만들었다.
  매장 타입에 따른 체크 박스도 작동한다.
  강남 지역에 존재하는 컨버스 매장을 검색해봤다.
  Search에 존재하는 input에 입력하는 값을 handleChange로 받아와 입력한 값과 체크박스에 체크 된 매장 정보에 해당하는 매장만 Map과 List 컴포넌트에 전달해주도록 구현했다.

• 첫 로딩 시에는 존재하는 모든 매장을 표시하기 위해 '전체'에 기본적으로 체크가 되어있다.
  '단독매장', '백화점/쇼핑몰'을 클릭하면 해당하는 매장만 표시하고, 둘은 동시에 클릭할 수 있어야 한다. 세 개중 아무 박스도 체크하지 않으면 표시되는 매장도 없다.
  해당 기능을 위의 코드와 같이 구현했다. (더 나은 알고리즘, 해결책이 있다면 댓글은 언제든 환영입니다)