TIL0507Component, props, map

component, props

component 는 대문자로 시작해야 한다
props 란 component 에 넣는 것들 html과 비슷한 방식(div class="name")이다 props 는 function 의 argument 로 간다
props 에는 string 말고도 boolean 등 넣을 수 있다

<Food fav="pizza" some={true} arr={[1, 2, 3, 4]} />

props 는 두 가지 방법으로 접근할 수 있다
props.name or { name }
props 는 객체의 형태로 전달되기 때문에 props.name 처럼 접근하거나 또는 { name } 처럼 오브젝트를 열어서 꺼내 사용할 수 있다

import React from 'react';
function Food(props) {
	return <h1>I like {props.fav}</h1>;
}
//
function Food({ fav }) {
	return <h1>I like {fav}</h1>;
}
function App() {
	return (
    	<div>
      		<h1>Hello</h1>
      		<Food fav="pizza" />
    	</div>
    );
}

map

map 은 array의 각 item에 함수를 적용한다

const arr = ['pin', 'jake', 'bacon'];
arr.map( name => "hi " + name);  // [ 'hi pin', 'hi jake', 'hi bacon' ]

map 을 이용한 코드

const foodILike = [
    {
      id: 1,
      name: "Pizza",
      image: "이미지 링크"
    },
    {
      id: 2,
      name: "ham",
      image: "이미지 링크"
    },
    {
      id: 3,
      name: "sandwich",
      image: "이미지 링크"
    }
];
//foodILike 라는 array 를 받았다는 가정하에
function Food({ name, img }) {
	return (
    	<div>
      		<h1>I Like {name}</h1>
			<img src={img} />
      	</div>
    );
}
function App() {
	return (
    	<div>
      		{foodILike.map( obj => <Food name={obj.name} img={obj.image}/>)}
      	</div>
    );
}

prop type

prop type 은 전달받은 데이터의 유효성을 검사하기 위해 사용한다
설정한 데이터가 맞지 않을 때 콘솔창에서 에러를 알려준다
데이터의 타입이 string 인지 number 인지 등을 정할 수 있다
prop type 을 사용하려면 일단 import 해야 한다

import PropTypes from 'prop-types'

그리고 데이터를 설명하면 된다
첫번째는 이름이 들어가고: PropTypes.데이터 타입 이렇게 구성된다
isRequired 는 말 그대로 꼭 필요하다는 것이다

// Food 컴포넌트의 데이터를 검사한다
Food.propTypes = {
	name: PropTypes.string.isRequired,
    img: PropTypes.string.isRequired,
    rating: PropTypes.number.isRequired,
}