Props

노마드 코더 강의를 통해 공부한 내용을 정리한다.
ReactJS로 영화 웹 서비스 만들기

#2.1 Reusable Components with JSX+Props

안에 작성한 property가 object 로 food component 에 전달된다.

import React from 'react';

function Food(props) {
  console.log(props);
  return <h1>I like {props.fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <Food
        fav="kimchi"
        something={true}
        lalala={["hello", 1, 2, 3, 4, true]} 
      />
    </div>
  );
}

export default App;

위처럼 object 로 한번에 받는게 아닌 개별적으로도 받을 수 있다.
food component 에 fav 라는 이름의 property를 kimchi 라는 value 를 보내준다.

import React from 'react';

function Food({fav}) {
  return <h1>I like {fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello!</h1> 
      <Food fav="kimchi" />
    </div>
  );
}

export default App;

넘겨받을 때 {} 안에 사용할 property object 의 name 을 적어주면 된다.

#2.2 Dynamic Component Generation

JavaScrip map

friends = ["dal", "mark", "lynn", "japan guy"]

friends.map(friend => {return friend + "*"})

//result
//["dal*", "mark*", "lynn*", "japan guy*"]
//return 결과 값으로 리스트가 만들어져서 반환된다.

map : list 의 각 item 으로 function 을 실행한 후 list 를 리턴하는 javascrip 함수이다.

import React from 'react'

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

const foodILike = [
  {
    name: "Kimch",
    image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
  },
  {
    name: "Bibimbap",
    image:
      "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
  },
  {
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
  }
];

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

export default App;

Warning: Each child in a list should have a unique "key" prop.

react 에서는 element 가 많을 경우 고유한 key 라는 것을 정해주어야 한다.
foodILike 의 각 object 에 id 를 추가해 주면 된다.

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

리액트에서 코드 규칙을 관리할때, img 요소에 alt 라는 속성을 주지 않아서 생기는 경고이다.

import React from 'react'

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

const foodILike = [
  {
    id: 1,
    name: "Kimch",
    image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
  },
  {
    id: 2,
    name: "Bibimbap",
    image:
      "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
  },
  {
    id: 3,
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
  }
];

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

export default App;

#2.3 map Recap

기본적인 react component 형태가 있다.
key prop 는 Food 에서 사용되지 않는데 이것은 기본적으로 react 내부에서 사용하기 위한것이다.
image element 는 alt prop 가 반드시 있어야 한다.
- 이건 시각 장애인들을 위한것이라 한다.
- https://www.pegs.com/blog/why-and-how-you-should-include-alt-text-on-your-website-for-visually-impaired-audience//

import React from 'react'

const foodILike = [
  {
    id: 1,
    name: "Kimch",
    image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
  },
  {
    id: 2,
    name: "Bibimbap",
    image:
      "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
  },
  {
    id: 3,
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
  }
];

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

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

export default App;

#2.4 Protection with PropTypes

picture 를 보내야 되는데 image 를 보낸다거나 사람은 종종 실수를 할 수 있다.
그러므로 내가 원하는 property 가 내가 갖고 있는 property 인지 항상 점검할 필요가 있다.

prop-types

https://ko.reactjs.org/docs/typechecking-with-proptypes.html/
prop-types 설치.

npm i prop-types

prop-types 는 내가 전달받은 props 가 내가 원하는 props 인지를 확인해 준다.
Prop-types 는 다양한걸 체크할 수 있다.
- array, boolean, true, false, object, number, string 등

• isRequired
  • 필수인지 아닌지를 정한다.

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

const foodILike = [
  {
    id: 1,
    name: "Kimch",
    image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",
    rating: 5
  },
  {
    id: 2,
    name: "Bibimbap",
    image:
      "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb",
    rating: 4.9
  },
  {
    id: 3,
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg",
    rating: 4.8
  }
];

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,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number
}

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

export default App;

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

Food.propTypes 설명

• name 의 유무, string 타입 확인
• picture 의 유무, string 타입 확인
• rating 이 number 타입인지만 확인
  • isRequired 을 사용하지 않으면 없어도 에러가 아니다.