2. React 첫 걸음

2. React 첫 걸음

React의 엘리먼트와 컴포넌트 개념 이해 필요.

엘리먼트는 컴포넌트의 인스턴스이며, 컴포넌트 클래스라고 한다.

2.1 엘리먼트 중첩

let h1 = React.createElement('h1', 'null, 'Hello World')
ReactDOM.render(
    React.createElement('div', null, h1, h1),
    document.getElementById('content')
)

// output
Hello World
Hello World

2.2 React 컴포넌트 클래스 생성

let h1 = React.createElement('h1', null, 'Hello World!')
class HelloWorld extends Reat.Component {
    render() {
        return React.createElement('div', null, h1, h1)
    }
}
ReactDOM.render(
    React.createElement(
    'div',
    null,
    React.createElement(HelloWorld),
    React.createElement(HelloWorld),
    React.createElement(HelloWorld)
    ),
    documnet.getElementById('content')
)

// output
Hello World!
Hello World!
Hello World!

2.3 React 속성 사용하기

React 컴포넌트 속성 : 컴포넌트 내부에서는 변경할 수 없는 값

let h1 = React.createElement('h1', null, 'Hello World!')
class HelloWorld extends React.Component {
    render() {
        return React.createElement('div', null, h1, h1)
    }
}
ReactDOM.render(
    React.createElement(
    'div',
    null,
    React.createElement(HelloWorld, {
    id: 'ember', 
    frameworkName: 'Ember.js',
    title: 'A rramework for ~'}),
    React.createElement(HelloWorld, {
    id: 'backbone',
    title: 'Backbone is ~'}),
    React.createElement(HelloWorld)
    ),
    documnet.getElementById('content')
)

ex) hello world 컴포넌트 구현

class HelloWorld extends React.Component {
    render() {
        return React.createElement('h1', null, 'Hello ' + this.props.frameworkName + ' world')
    }
}

요약

• React 엘리먼트를 중첩하여 자식 엘리먼트로 추가하려면 createElement()의 세 번째 인자로 계속해서 전달하면 된다.
• React 엘리먼트를 생성할 때 사용자 정의 컴포넌트 클래스를 사용한다.
• 속성을 사용하여 React 엘리먼트의 렌더링 결과를 바꾼다.
• 부모 컴포넌트는 자식 엘리먼트에 속성을 전달할 수도 있다.
• React 컴포넌트를 통해 컴포넌트 기반 아키텍처를 구현할 수 있다.