propTypes

propsType

• npm이나 yarn 등으로 라이브러리를 다운받아 import해준다.
• 부모 component에서 자식 component로 props를 넘길 때, propsTypes에 지정된 변수명, 그리고 변수의 타입과 일치하는 지 여부를 콘솔에 체크해준다.
• type만 체크할 수도 있고, required를 호출하는 방식으로 type과 required를 체크할 수 있다.(isRequired는 사용자가 해당 props를 사용하지 않았을때 warning이 발생된다.)

Food.propTypes = {//이름propTypes로 고정
  name: PropTypes.string.isRequired,
  picuture: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired
  //name,picture에는 string을 기대하고 rating에는 number을 기대한다, 
}

img태그

• img의 src주소는 .jpg로 끝나야 한다.
• alt속성을 주지 않으면 warning이 발생하는데, 이 부분은 react에서 코딩 컨벤션(코드 규칙)을 관리할 때 사용하는 eslint에서 제공하는 warning이다.
  사실 alt를 작성하지 않는 경우도 많지만 웹표준에 맞추려면 alt속성을 주는게 맞다.
  (js가 아닌 framework에서는 표준에 대한 규칙이 까다롭다)

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

Props

• props를 argument로 받아 사용하는 2가지 방법

방법1

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

방법2

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

기타

• 태그 사이에 text를 그냥 쓰면 text지만 {}안에 사용하면 javascript이다.
• foodILike는 object를 원소로 갖는 배열이며 따라서 map메서드를 이용할때 아래의 dish는 object이다.

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

export default App;

[Full Code]

import React from 'react';
import './App.css';
import PropTypes from "prop-types";

const foodILike = [
{
id: 1,
name: "Kimchi",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Gimchi.jpg/300px-Gimchi.jpg",
rating: 5
},
{
id: 2,  
name: "bulgogi",
image: "https://upload.wikimedia.org/wikipedia/commons/c/ce/Bulgogi_2.jpg",
rating: 3
},
{
id: 3,  
name: "kimbap",
image: "https://i.pinimg.com/564x/8d/fe/2b/8dfe2b4bad6a46a03b234cd0eb74c9dc.jpg",
rating: 4.9
},
{
id: 4,  
name: "samgyetang",
image: "https://imagescdn.gettyimagesbank.com/500/20/384/235/0/1246795361.jpg",
rating: "",
}
];

function Food({name, picture, rating}){
  return(
    <div>
       <h2>I like {name}</h2>
       <h4>{rating}/5.0</h4>
       <img src={picture} alt={name}/>
    </div>
  )
}
Food.propTypes = {
  name: PropTypes.string.isRequired,
  picuture: PropTypes.string.isRequired,
  rating: PropTypes.number
}

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

export default App;

replit을 사용하면서 계정당 500MB의 storage를 제공한다고 한다. 기존의 계정에서 컨테이너를 만들고 라이브러리를 다운로드 할때 "killed"가 뜨면서 다운이 안되길래 계정을 새로 파고 라이브러리를 다운로드 하니 잘된다.