Component란 ?

HTML, Javascript, CSS가 하나로 구성된 일종의 태그(코드블럭)라고 볼 수 있다.
Component내부에도 Componet를 넣을수 있고 converting후에 DOM Tree 형태가 된다.
또한 리액트에서 가상 DOM을 사용하기 때문에 바뀐부분만 정확히 바꿀 필요가없이, 전후 상태를 비교해서 바뀐부문만 자동으로 다시 랜더링해준다.

Component 생성

Class

import React from 'react'

Calss ClassComponent extends React.Component {
  render () {
    return <div>Hello world</div>
  }
}

Function

//1
function FuncComponent1 () {
  return <div>Hello world</div>
}

//2
const FuncComponent2 () => <div>Hellow world</div>
// arrow function에서 함수내 코드가 return 뿐일 경우 {}와, return 생략가능.

Component 사용

class, function형 모두 사용법은 동일하게 태그를 사용하듯 사용하면된다.

<Component />