이제 실제로 숙소 데이터에 필터를 적용해야겠다 앞서서 가격범위, 숙소유형 등 우리가 검색을 할 때 필요한 필터링한 부분을 state 에 저장하는 부분까지 다뤄보았다. 이제 우리가 어떠한 체크박스나 가격 범위등을 설정하면, 그에 따른 설정 값들이 useState 에 의해 저장되어있다. 뭐 침대는 몇개여야 하고, 침실은 몇개에, 개인실이어야 하며 최대 10만 미만인 등등.... 사실 원래 같았음, 이러한 조건들을 한데 모아서 최종적으로 검색 버튼을 클릭할 시 navigate 를 활용하여 URL 을 변경해주고, 메인페이지에서 변경된 URL 을 통해 백엔드 API 에 요청을 하게 되면 된다. 그러니깐 원래 계획은 그냥 사용자가 어떻게 필터를 하던 마지막에 가서 최종적으로 검색을 눌렀을 때의 필터값들을 전송하려고..
앞서서 가격 범위를 결정하는 부분에 대해서 살펴보았고, 이제 나머지 유형들을 필터하는 과정을 살펴보자. 숙소 유형 숙소 요형은 총 3가지로 나뉘게 된다. 전체를 아우르는 집 전체와 개인실, 다인실로 구현하였다. 다만 어떠한 숙소는 개인실로도 사용이 가능할 것이고 다인실로도 사용이 가능하게 된다. 따라서 중복 체크가 될 수 있도록 해야하고, 필터링 결과는 체크된 조건들을 모두 포함하는 숙소를 나타내야 할 것이다. 기존 에어비엔비 사이트의 필터창과 동일하게, 그리고 가장 직관적인 표현방법은 역시나 체크박스를 이용하는것이다. 체크박스는 실제로 로서 구현할 수 있었지만, 위에서 metarial UI 를 활용하였으니 이번에도 같은 라이브러리를 사용해보기로 하였다. 연습할겸 편리하기도 하니 사용하는 게 좋을것이라 ..
이제 하위 컴포넌트들을 관리하는 최상위 컴포넌트 Nav 를 정리해보자. 처음 Nav 를 설계할 때, 생각 이상으로 상위에서 props 로 전달해주어야 할 변수 및 함수가 많을 것이라 예상되었다. 그도 그럴 것이 실시간으로 조건에 맞는 Nav 를 랜더링 해야하며, 그 각각의 Nav에 대해 따른 모달 컴포넌트도 정상적으로 랜더링 되어야 하기 때문이며 또한 사용자가 편리하게 사용할 수 있도록 신경써야 하였기에 Nav 가 유기적으로 움직이기 위해 좀 더 체계적으로 설계했어야 했다. 이로 인해 Nav 의 코드는 직관적이지 않게 코드가 짜여졌다. import React, { useState, useRef, useEffect } from 'react'; import LoginModal from '../Modal/Lo..
추후에 두가지로 상태가 변하는 Nav 에 대해서 다루겠지만, 그 전에 어떠한 상태에서든지 우측 상단에는 프로필 버튼이 있다. 추후 로그인을 할때나 로그아웃, 마이페이지, 혹은 예약상태 등등 추가기능이 구현될 경우 navigate 를 걸어줘야 하기 때문에 당연히 만들었어야 했고, 로그인 상태와 비 로그인 상태에 따라 생성되는 모달창 역시 컴포넌트로 나누어서 구성하였다. 고려해야 할 점은 모달창이 열리고 닫히는 것과, 2가지 다른 모달창이 구별되어 나와야 하는 점이다. 더 좋은 방법이 있을 것 같지만, 당시에 생각했을 때는 2가지의 nav 형태에서 모두 버튼에 모달창이 연결되어있어야 하고, 같은 state 변화로 관리를 하는게 효율적이라 판단했다. 그래서 크게 나눠보면 profileModal : 네이밍을 좀..
