자스-JSX & Props

props는 개발에서 많이들 사용되는 용어인 프로퍼티(properties)의 줄임말입니다.
props 는 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로 , (자식 입장에서 ) 읽기 전용 입니다.

import React from "react";

function Food(props) {
  return <h1>I like {props.fav}</h1>;
}
function App() {
  return (
    <div>
      <h2>hi</h2>
      <Food fav="kimchi" />
    </div>
  );
}

export default App;

위의 코드를 보면 App 이라는 함수에서 Food 라는 함수로 전달을 했습니다 그죠??

import React from "react";

function Food({ fav }) {
  return <h1>I like {fav}</h1>;
}
function App() {
  return (
    <div>
      <h2>hi</h2>
      <Food fav="kimchi" />
      <Food fav="ramen" />
      <Food fav="samgiopsal" />
    </div>
  );
}

export default App;

한가지 뿐만아니라 여러가지를 보낼수 있어요 .

(사진크기 줄이는 법 아시는분.. 댓글좀..)

jsx 는 단순히 html 와 javascript 를 합친것이고
Component 를 작성할때는
대문자로 시작해야합니다.
ex )

 <Girl like = "sory" /> 

이러한 component 로 정보를 보낼 수 있습니다.

명언

갈땐 가더라도 좋아요 한번 정도는 괜찮잖아
-신세계-