[React] Component 만드는법 및 렌더링

1. Component

- Component는 초기버전에서는 Class Component를 주로 사용했지만 불편하다는 의견이 있어 이후에는 Function Component를 개선하여 사용

- 개선하는 과정에서 만들어진것이 Hook

 

2. Function Component

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

 

3. Class Component

- 함수를 상속받아서 자식을 만듦

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

 

* Component 이름은 항상 대문자로 시작

// HTML div 태그로 인식
const element = <div />;

// Welcome이라는 리액트 Component로 인식
const element = <Welcome name="Beombe" />;

 

4. Component Rendering

// Dom 태그를 사용한 Element
const element = <div />;

// 사용자가 정의한 Component를 사용한 Element
const element = <Welcome name="Beombe" />;

//실제 렌더링 코드
function Welcome(props) {
    return <h1>Hi, {props.name}</h1>';
}

const element = <Welcome name="Beombe"/>;
ReactDOM.render(
    element,
    document.getElementById('root')
);