리엑트 교과서를 정리한 내용입니다.
엘리먼트는 컴포넌트의 인스턴스이며 컴포넌트 클래스라고 한다.
2.1 엘리먼트 중첩
여러개 엘리먼트가 중첩되는 경우가 많다.
ReactDOM.render()에는 하나의 React엘리먼트만 인자로 전달할 수 있다.
동일한 DOM객체에 두개의 h1태그를 렌더링해야 하는 경우 두 요소를 1
2
3
4
5
6
7```js
var h1 = React.createElement('h1', null, 'Hello world!') //-h1요소를 생성하여 변수에 담음
var div = React.createElement('div', null, h1,h1) //-세번째 이후 매개변수가 문자열이 아니면 새로 생성하는 엘리먼트의 자식 엘리먼트다.
ReactDOM.render( //h1요소를 ID가 content인 실제 DOM에 랜더링함
div,
document.getElementById('content')
)
createElement 의 첫번째 매개변수에는 아래 두가지 자료형을 입력할 수 있다.
- 문자열로 작성한 일반적 HTML태그. 소문자로 작성 ex) ‘h1’, ‘div’
- React 컴포넌트 객체, HelloWorld를 예로 들 수 있음. React 컴포넌트 객체이름은 대문자로 시작한다.
2.2 React컴포넌트 클래스 생성
컴포넌트 클래스(component class)를 사용하면 기능을 느슨하게 결합된 부분으로 분리하여 코드를 재사용할 수 있다.
‘Hello world!’를 별도의 클래스로 분리하는 방법.
class HelloWorld extends React.Component로 상속받아 사용1
2
3
4
5
6
7
8
9
10let h1 = React.createElement('h1', null, 'Hello world!')
class HelloWorld extends React.Component {
render() {
return React.createElement('div', null, h1, h1)
}
}
ReactDOM.render(
React.createElement(HelloWorld, null),
document.getElementById('content')
)
여기서 render()는 엘리먼트 하나만 반환함
Hello world!를 여러번 노출해야하면 아래와 같이 클래스 재사용 가능1
2
3
4
5
6
7
8
9ReactDOM.render(
React.createElement(div,
null,
React.createElement(HelloWorld),
React.createElement(HelloWorld),
React.createElement(HelloWorld)
),
document.getElementById('content' )
)
2.3 React 속성(props) 사용하기
컴포넌트의 속성(properties)은 React선언형 스타일의 기초다.1
React.createElememt('a', {href: 'https://eunii.github.io'})
속성은 컴포넌트 내부에서는 변경할 수 없는 값이다.
부모 컴포넌트가 자식 생성 시점에 속성을 할당한다.
속성은 아래와 같은 용도로 사용가능
- 일반적 HTML 요소의 속성: href, title, style, class
- React 컴포넌트 클래스의 자바스크립트코드에서 this.props의 값. 예를 들어 this.props.PROPERTY_NAME
render()메서드에서 입력하여 렌더링하거나 코드에서 활용 할 수 있다.
HelloWorld컴포넌트에 아래 세가지 속성을 추가한다.
- id
- frameworkHame
- title
id와 title은 h1의 표준속성과 일치에서 랜더링하고 frameworkName은 랜더링 하지 않는다.
h1을 구현하기 전에 helloWorld클래스의 속성을 전달해야함.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19ReactDOM.render(
React.createElement(
'div',
null,
React.createElement(HelloWorld, {
id: 'ember',
frameworkName: 'Ember.js',
title: 'A framework for creating ambitious web applications.'}),
React.createElement(HelloWorld, {
id: 'backbone',
frameworkName: 'Backbone.js',
title: 'Backbone.js gives structure to web applications...'}),
React.createElement(HelloWorld, {
id: 'angular',
frameworkName: 'Angular.js',
title: 'Superheroic JavaScript MVW Framework'})
),
document.getElementById('content')
)
render()에서 frameworkName속성 사용하기1
2
3
4
5
6
7
8
9
10
class HelloWorld extends React.Component {
render() {
return React.createElement(
'h1',
this.props, //모든 속성을 자식 엘리먼트에 전달한다.
'Hello ' + this.props.frameworkName + ' world!'
)
}
}