React Props & JSX

Props

prop = property 입니다.
props 는 속성을나타내는 데이터입니다
React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props”라고 합니다

props를 이용하면 component는 언제나 같은 값을 만들어주었는데 동적으로 변경이가능해집니다.

function Food(props){
  console.log(props.name)
  return <h1> I Like {name}</h1>
}
-->console.log = kimchi가 출력된다.
  return 값으로는 I Like Kimchi가 출력된다
  
finction App(){
return(
  <div>
    <Food name ="kimchi"/>
  </div>
  );
 } 

지금 코드처럼
props란 뭐든지 component에 넣게되는것들입니다
props 는 즉 food에 첫번째 argument로 가게 되는것이고 우린 이걸 이용해 동적으로 변경을 할수있게 됩니다.

ES6 문법을이용해 좀더 있어보이게? 만들수있는데

function Food({ name }){
  return <h1> I Like {name}</h1>
}

props는 객체이기때문에 인자로 즉시 name을 넣어주어서 좀더 보기좋게 만들었습니다.

JSX

JSX는 React에서 거의 유일하게 자체적으로 사용되는 컨텐츠 일 것입니다.
JSX는 그저 react가 만든
HTML + Javascript 일 뿐입니다.
그렇기 떄문에 React가아닌 다른 vue나 anguler 등에서는 사용이 불가능합니다.

주의사항으로는 자바스크립트 코드를 적용할때는 { } 안에서 사용해야하고,
camelCase를 사용하는게 암묵적 룰입니다.