クローンコードで学んだこと(1)

11215 ワード
上のコード クローンエンコーディング WeCode テキストリンク
上のコードの最初のプロジェクトとして重要なグループに割り当てられています.
実は私を除いて他の人はよくやっている人が心配しています.
特に最近いろいろなことがあって、課題に集中できなくて、自分が足りないと感じています.しかし、幸いなことに、指導者やチームメンバーのアドバイスと励ましの下で、私はグーグルを遊びながら、私が担当している部分のページリスト構成を完成させ、少し成長したような気がして、コードの喜びを感じました.
まずバックグラウンドのメンバーのデータがまだ完成していないので、私は一時的にモバイルデータを作って画面を組織しました.やはり理論だけを勉強することはできません.コードは自分でやります.勉強が多くて、実力が向上したようです.このページを作成する過程で、mapメソッドとコンポーネント構成についてもっと知りました.
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>
  );
}

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>
    </>
  );
}
SWIFT Table Cell xibの使用
Iris Classification