재사용가능한 컴포넌트(Reusable Components) with JSX + Props(수정중)

재사용가능한 컴포넌트(Reusable Components) with JSX + Props

React application 은 한번에 하나의 component 만을 rendering 해야한다.
그 component가 App.

JSX는 javascript 안의 HTML이다. jsx = HTML + Javascript
component를 만들고 어떻게 사용하는가에 대한 것.

React가 멋진 이유는 재사용 가능한 component를 만들 수 있다는 점. component를 계속해서 반복해서 사용 할 수 있다.

component는 대문자로 시작해야하고 component로 정보를 보낼 수 있다.

import React from "react";

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

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

export default App;

props.fav -> {fav}