4. 리액트 컴포넌트 만들기

map() 함수를 이용하면 여러 개의 컴포넌트를 쉽게 만들 수 있다.

현재 이 코드는 효율적이지 않다. 새 음식을 추가할 때마다 <Food fav="...">를 복사해야 하므로.

 

서버에서 넘어온 데이터를 저장할 수 있도록 foodLike라는 빈 배열을 만들거다.

저 배열안에 서버에서 데이터가 넘어온다고 가정하고 음식속성들을 입력할거다.

const foodLike = [
  {
    name: 'Kimchi',
    image: 'https://cdn.pixabay.com/photo/2020/01/01/00/15/one-address-based-4732816_960_720.jpg',
  },
  {
    name: 'Samgyeopsal',
    image: 'https://cdn.pixabay.com/photo/2016/04/05/09/17/pork-1308988_960_720.jpg',
  },
  {
    name: 'Bibimbap',
    image: 'https://cdn.pixabay.com/photo/2020/02/28/12/40/bibimbap-4887394_960_720.jpg',
  },
  {
    name: 'Doncasu',
    image: 'https://cdn.pixabay.com/photo/2018/03/06/09/02/food-3202918_960_720.jpg',
  },
  {
    name: 'Kimbap',
    image: 'https://cdn.pixabay.com/photo/2017/08/08/09/44/food-photography-2610864_960_720.jpg',
  },
];

map()함수를 foodLike 배열에 적용해서 코드를 적용할거다.

dish에 foodLike 배열에 있는 원소가 하나씩 넘어가고, 그 원소가 객체 형태이므로

dish.name 과 같이 props에 넘겨준거다.

 

이제 이미지 props를 추가해보자.

그리고 Food컴포넌트에서 이미지 props를 받을 수 있도록 만들어야된다.

---

map() 함수의 인자로 함수 전달하기

 

리액트는 Food컴포넌트가 서로 다르다는 걸 알 방법이 없기 때문에,

key props 라는 리액트 내부에서 사용되는 특수한 props를 만들어줘야된다.

그리고 배열의 각 요소에 rating(평점)도 추가하겠다.

 

const foodLike = [
  {
    id: 1,
    name: 'Kimchi',
    image: 'https://cdn.pixabay.com/photo/2020/01/01/00/15/one-address-based-4732816_960_720.jpg',
    rating: 5,
  },
  {
    id: 2,
    name: 'Samgyeopsal',
    image: 'https://cdn.pixabay.com/photo/2016/04/05/09/17/pork-1308988_960_720.jpg',
    rating: 4.9,
  },
  {
    id: 3,
    name: 'Bibimbap',
    image: 'https://cdn.pixabay.com/photo/2020/02/28/12/40/bibimbap-4887394_960_720.jpg',
    rating: 4.5,
  },
  {
    id: 4,
    name: 'Doncasu',
    image: 'https://cdn.pixabay.com/photo/2018/03/06/09/02/food-3202918_960_720.jpg',
    rating: 5,
  },
  {
    id: 5,
    name: 'Kimbap',
    image: 'https://cdn.pixabay.com/photo/2017/08/08/09/44/food-photography-2610864_960_720.jpg',
    rating: 4.7,
  },
];

---

props의 자료형을 검사할 수 있는 prop-types를 설치

 

npm install prop-types

 

스트링을 입력하라고 정의했는데 숫자를 입력했으므로 rating 부분에 경고가 발생할것이다. 

string을 number로 수정해주면 경고 문제를 해결할수있다.

---

<코드기록>

import React from 'react';
import PropTypes from 'prop-types';

function Food({ name, picture, rating }) {
  return (
    <div>
      <h2>I like {name}</h2>
      <h4>{rating}/5.0</h4>
      <img src={picture} alt={name} />
    </div>
  );
}

const foodLike = [
  {
    id: 1,
    name: 'Kimchi',
    image: 'https://cdn.pixabay.com/photo/2020/01/01/00/15/one-address-based-4732816_960_720.jpg',
    rating: 5,
  },
  {
    id: 2,
    name: 'Samgyeopsal',
    image: 'https://cdn.pixabay.com/photo/2016/04/05/09/17/pork-1308988_960_720.jpg',
    rating: 4.9,
  },
  {
    id: 3,
    name: 'Bibimbap',
    image: 'https://cdn.pixabay.com/photo/2020/02/28/12/40/bibimbap-4887394_960_720.jpg',
    rating: 4.5,
  },
  {
    id: 4,
    name: 'Doncasu',
    image: 'https://cdn.pixabay.com/photo/2018/03/06/09/02/food-3202918_960_720.jpg',
    rating: 5,
  },
  {
    id: 5,
    name: 'Kimbap',
    image: 'https://cdn.pixabay.com/photo/2017/08/08/09/44/food-photography-2610864_960_720.jpg',
    rating: 4.7,
  },
];

function App() {
  return (
    <div>
      {foodLike.map(dish => (
        <Food key={dish.id} name={dish.name} picture={dish.image} rating={dish.rating} />
      ))}
    </div>
  );
}

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number,

}

export default App;

 

<실행화면>

 

---

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.