React Element

리액트가 다른 프레임워크들과 결정적으로 다른 부분은 자바스크립트 객체를 DOM 엘리먼트로 만드는 부분이다. 엘리먼트를 만들때 .createElement()라는 리액트메소드를 사용한다. (document 메서드랑 비슷한데 조금 강화되어있다.)

import React from 'react';
import ReactDOM from 'react-dom';
//ReactDOM은 리액트로 만든 엘리먼트를 브라우저에 랜더링 한다.

const element = React.createElement('div', null, 'hello world');

const rootElement = document.getElementById('root');

ReactDOM.render(
    element, rootElement
);

element를 콘솔에 출력해보면, 여러가지 프로퍼티들을 가진 그냥 자바스크립트 객체임을 할 수 있다.

.createElement()의 첫번째 인자는 document 메서드와 동일하게 tagName이다. 두번째 인자는 프로퍼티들을 넣을 수 있고, 세번째에는 textNode나 또 다른 리액트 엘리먼트 혹은 컴포넌트 가 들어간다.

프로퍼티를 넣을때는 {} 형태로 넣어야하며, html문서에서 사용하는 attribute명이 아니라, 자바스크립트에서 접근하는 엘리먼트의 프로퍼티 명으로 넣어야 한다. (말이 좀 이상한데?) 예를들어 forhtmlFor로 사용할 수 있고, classclassName로 사용한다. (HTMLDOMPropertyConfig.js 리액트에서 실제 DOM프로퍼티로 전달가능한 프로퍼티의 목록이다.)

const people = [
    {name:"minwoo"},
    {name:"kuma"},
    {name:"nangrang"}
]

// array등을 반복자를 통해 mapping할때 연속된 엘리먼트에 key(unique)를 넣어주지 않으면
// 콘솔에 빨간 에러를 발생시켜 심기를 불편하게 만든다.
const element = React.createElement('ol', null, people.map((person, index) => {
    React.createElement('li' , {key: index}, person.name );
});

JSX

React.createElement() 메소드 의 html모양 버전. 내부적으로는 여전히 .createElement()메소드를 사용한다. jsx에서 자바스크립트요소를 사용할떄는 {}로 묶어 사용한다.

const people = [
    {name:"minwoo"},
    {name:"kuma"},
    {name:"nangrang"}
]

var element = <ol>
{people.map((person,index) => {
    return (<li key={index}>{person.name}</li>);
})}
</ol>;

jsx를 사용할때는 하나의 루트 엘리먼트로 묶어줘야 한다. .createElement()를 사용하는것을 인지한다면 당연한 얘기다.

참고

React Components

참고

results matching ""

    No results matching ""