[React] Reusable Component 만들기

방법

1. App.js에 Food(props) 함수 추가
2. App() 함수 안에 <Food fav="cookie" /> 추가
   1. fav : property
   2. Food(props)에 console.log(props) 추가
   3. Food 함수 호출 하면 fav 등 모든 props를 남긴다. (웹페이지 > inspect > console > object에서 확인 가능)
3. Food({fav}) : props 중 fav를 쓴다.

출처

https://nomadcoders.co/react-fundamentals/lectures/1548

All Courses – Nomad Coders

 

코드

app.js

import React from 'react';

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

function App() {
  return (
    <div>
      <h1>Hello, guys</h1>
      <Food fav="cookie" />
      <Food fav="ramen" />
      <Food fav="rice" />
      <Food fav="popcorn" />
    </div>
  );
}
export default App;

https://github.com/grace-kimm/movie_app_2020/commit/38c9d313697d3d26d714afda67fb92be39babe60

#2.1 Reusable Components with JSX + Props · grace-kimm/movie_app_2020@38c9d31