티스토리 뷰

React

2. React 첫 걸음

새로운 도전을 즐기는 모기같은 개발자. 하늘을난모기 2018.12.02 18:21
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 컴포넌트를 통해 컴포넌트 기반 아키텍처를 구현할 수 있다.
댓글
댓글쓰기 폼