[React] Component와 Props

컴포넌트 Component

html을 반환하는 함수
UI를 독립적이고 재사용 가능한 부분으로 분리할 수 있다.

function component

• 맨 앞글자를 대문자로 작성해야한다. App
• import React from 'react'; import문을 필수로 작성해야한다.
• react application은 한번에 하나의 component만 rendering 할 수 있다. (ReactDOM.render ~)

import React from 'react';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

function App() {
  return (
    <div>
      <h1>Hello~!</h1>
    </div>
  );
}

Props

component에서 component로 데이터를 넘겨줄 수 있다.

const foodILike = [
  {
    id: 1,
    name: "bibimbap",
    image: "bibimbap.jpg",
    rating: 3
  },
  {
    id: 2,
    name: "ramen",
    image: "ramen.jpg",
    rating: 4.9
  },
  {
    id: 3,
    name: "kimbap",
    image: "kimbap.jpg",
    rating: 5
  }
];

function Food({name, image, rating}) {
  return (
    <div>
    	<h1>I like {name}</h1>
    	<h4>{rating}/5.0</h4>
    	<img src={image} />
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Hello~!</h1>
      {foodILike.map(food => (
        <Food key={food.id} name={food.name}
	      image={food.image} rating={food.rating}/>
      ))}
    </div>
  );
}

• [propTypes](https://velog.io/@nsunny0908/React-proptype)를 통해 type을 지정하고 유효한지 확인 할 수 있다.
• 부모에게 받은 props를 자식이 바꾸지않는다. 부모에서 바꿔야한다.
  반드시 자식에서 바꿔야한다면 state로 만들어서 바꿔야한다.

class component

• extends React.Component extends문을 필수로 작성해야한다.
• class component자체는 return을 가지고 있지 않다.
• react는 자동적으로 모든 class component의 render method를 실행하고자 한다.

class App extends React.Component {
  render(){
    return (
      <div>
        <h1>This is a class component</h1>
      </div>
    )
  }
}