[React]Component란?

Component

컴포넌트의 이름은 항상 대문자로 시작한다. React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다.
div 는 HTML 태그로 인식하고, Welcome은 컴포넌트로 인식하며 범위내에 Welcome 컴포넌트가 있어야 한다.

<div></div>
<Welcome/>

클래스형 컴포넌트

state 기능 및 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있다. render() 함수가 필수다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

함수형 컴포넌트

state와 라이프 사이클 API의 사용이 불가하지만, Hooks 기능으로 대체할 수 있게 됐다. 공식 매뉴얼에서는 컴포넌트 작성시
함수형 컴포넌트의 사용을 적극 권한다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

컴포넌트 랜더링

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다.

const element = <Welcome name="Sara" />;

React는 사용자 정의 컴포넌트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다.
이 객체를 props라고 한다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />; // {props.name} === 'Sara'

ReactDOM.render(
  element,
  document.getElementById('root')
);