요기요 클론코딩을 하면서 배운 것(1)

위코드의 1차 프로젝트로 요기요 팀에 배정되었다.
사실상 나 빼고 다잘하시는 분들이서 많이 걱정이 되었다.
특히나 최근 여러가지 일이 있어서 온전히 과제에 집중을 못해서 스스로 많이 부족함을 느끼고 있었다. 그러나 다행히 멘토님과 팀원 분들의 조언과 격려로 구글링을 해가면서 내가 맡은 부분의 페이지 목록 구성을 어느정도 완성해서 조금 성장한 것 같아 코딩의 기쁨을 느꼈다.

일단은 아직 백엔드 조원분들의 데이터가 완성은 되어있지 않아서 내가 임시로 Mock Data를 만들어서 화면을 구성해보았다. 역시 이론만 공부해서는 안되고 코딩은 내가 직접 쳐봐야지 많이 배우고 실력이 느는 것 같다. 이번 페이지를 만들면서 좀 더 map메서드와 component구성을 하는 것에 대해서 알게 되었다.

<RestaurantList.js 파일>

import React, { useState, useEffect } from 'react';
import Restaurant from '../Restaurant/Restaurant';
import './RestaurantList.scss';

export default function RestaurantList() {
  // component를 구성해서 map을 돌린다.
  const [restaurants, setRestaurants] = useState([]);

  useEffect(() => {
    fetch('/data/infoList.json')
      .then(res => res.json())
      .then(result => setRestaurants(result));
  }, []);

  return (
    <div className="RestaurantList">
      <select className="selectOption">
        <option value="">--Please choose an option--</option>
        <option value="ratingStars">별점 순으로</option>
        <option value="reviewsNumbers">리뷰 많은 순으로</option>
      </select>
      <div className="restaurantListMain">
        {restaurants.map(restaurant => {
          return (
            <Restaurant
              key={restaurant.resId}
              resImg={restaurant.resImg}
              resName={restaurant.resName}
              resRates={restaurant.resRates}
              resReviews={restaurant.resReviews}
              resAddress={restaurant.resAddress}
              resTelephone={restaurant.resTelephone}
            />
          );
        })}
      </div>
    </div>
  );
}

<Restaurant.js 파일>

import React from 'react';
import { useNavigate } from 'react-router-dom';
import './Restaurant.scss';

export default function Restaurant({
  resId,
  resImg,
  resName,
  resRates,
  resReviews,
  resAddress,
  resTelephone,
}) {
  const navigate = useNavigate();
  const goToMain = () => {
    navigate('/wehaeyo/src/pages/Main');
    // 이후에 상세페이지로 넘어가는 것으로 수정 필요
  };

  return (
    <>
      <div className="Restaurant" onClick={goToMain}>
        <div className="listImg">
          <img key={resId} alt="restaurantImage" src={resImg} />
        </div>
        <div className="listMain">
          <h3>{resName}</h3>
          <div className="resInfo">
            <span className="iconStar">★ 별점: {resRates}</span>
            <span className="reviewNumber">리뷰갯수: {resReviews}</span>
            <p>주소: {resAddress}</p>
            <p>전화번호: {resTelephone}</p>
          </div>
        </div>
      </div>
    </>
  );
}