Props

Props

---

Props란 react에서 데이터를 넘기는 방법이라고 볼 수 있다.
props.변수명 == {변수명}

import React from "react";

// props.name == {name}

function FoodList({name}){
    return (
      <div>{name} 먹고싶다</div>
    )
}

const list = [
  { key : 1,
    name: "치킨" },
  { key : 2,
    name: "피자" },
  { key : 3,
    name: "곱창" },
  { key : 4,
    name: "떡볶이" },
];

function App() {
  return (
    <div>
        Hello World!
        {list.map(food => {
          return <FoodList key={food.key} name={food.name} />
        })}
    </div>
  );
}

Array.map()

javascript에서는 array에 기본적으로 내장되있는 map이라는 함수가 존재한다. 이 함수는 해당 어레이 수만큼 반복하며 리턴하게 된다.

# map사용시 고유의 key값 오류가 난다. 이유는 고유의 key값을 정해줘야하기 떄문이다.

function App() {
  return (
    <div>
        Hello World!
        {list.map((food , index) => {
          return <FoodList key={index} name={food.name} />
        })}
    </div>
  );
}

위에 {food.key}가 아닌 index 값을 주어 key값을 생성할 수 있다.

prop-Tpyes

---

Props의 데이터 타입을 체크할 수 있는 npm 모둘이다.

npm install prop-types

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

function Movie({id, year, title, summary, poster ,genres}) {
  return (
   //...
  );
}

Movie.prototype = {
  id: PropTypes.number.isRequired,
  year: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  poster: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired
};

export default Movie;

number와 String , Array 등 해당 프롭의 타입이 올바른지 확인 할 수 있다.