React - mock data 를 활용한 페이지 구현 (feat.FE & BE 의사소통의 중요성)

• 2차 프로젝트 돌하룻밤 에서 숙소 리스트 페이지 를 담당하게 됨

• 숙소 정보가 적혀있는 리스트 하나하나가 계속 반복됨으로 해당 내용을 담은 컴포넌트를 생성하고, 숙소 정보들은 추후 백엔드로 부터 받을 data 이기 때문에 mock data 를 만들어 페이지를 구현하기로 함

• 구현하기에 앞서 처음부터 mock data 의 key, value 값을 백엔드와 같이 정하는 것이 좋을 것이라고 판단

• sprint meeting 전 mock data 예시를 만들고 이를 notion 페이지에 공유하여 회의 때 팀원들과 함께 key, value 값을 정함.
  

• 정해진 key, value 값으로 프론트와 백엔드가 작업하니 작업 속도도 수월했고, 통신도 한번에 성공할 수 있었음!

• 프론트와 백엔드 간의 의사소통의 중요성을 다시금 깨닫게 되었음. 🥰
  
  

// Staylist.js
const Staylist = () => {
  const [placeList, setPlaceList] = useState([]);
  useEffect(() => {
    fetch('/data/PlaceList.json')
      .then(res => res.json())
      .then(data => setPlaceList(data));
...

return (
    <StaylistContainer>
      <Main>
        <StayPlace>
          {placeList.map(
            ({
              stayId,
              placeImages,
              description,
              placeName,
              adult,
              kid,
              pet,
              bed,
              bedRoom,
              bathRoom,
              stayService,
              price,
            }) => {
              return (
                <Placelist
                  key={stayId}
                  placelist={{
                    stayId,
                    placeImages,
                    description,
                    placeName,
                    adult,
                    kid,
                    pet,
                    bed,
                    bedRoom,
                    bathRoom,
                    stayService,
                    price,
                  }}
                />
              );
            }
          )}
        </StayPlace>