[React] 기본구조

CDN Links

https://reactjs.org/docs/cdn-links.html

React를 실행하기 위해서는 아래와 같이 관련 js 파일을 읽어 들여야 한다.

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

 

React Element

React 프로그램의 기본구조는 아래와 같다.

<div id="root"></div>
<script>
    let e = React.createElement;
    ReactDOM.render(
        e("h1", { id: "hello" }, "Hello, world!"),
        document.getElementById('root')
    );
</script>

React.createElement() 메소드는 구성할 DOM의 요소로 사용될 React Element를 생성하는 함수로서, 첫번째 인자는 태그종류, 두번째 인자는 태그속성, 마지막은 자식요소이다.

React.createElement( type, [props], [...children])

 

JSX

React.createElement() 메소드를 이용하여, DOM을 구성하는 것은 가독성이 매우 떨어진다. JSX문법을 이용하면 HTML과 같이 작성이 가능하다. JSX를 사용하기 위해서는 babel을 포함시켜야 한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

script 태그의 type 속성값에 "text/babel"을 넣어주면, babel이 JSX문법을 React 문장으로 자동으로 변환시켜 준다.

<div id="root"></div>
<script type="text/babel">
    ReactDOM.render(
        <h1 id="hello">hello, world!</h1>, // JSX
        document.getElementById('root')
    );
</script>

 

React Component

React의 Component를 사용하면 반복적인 요소들을 쉽게 구성할 수 있다. 아래는 함수를 이용하여 Component를 만드는 방법이다.

function Title(props) {
    return <h1 style={props.style}>{props.title}</h1>;
}

클래스를 이용하여 Component를 만드는 방법은 아래와 같다.

class Title extends React.Component {
    render() {
        return <h1 style={this.props.style}>{this.props.title}</h1>;
    }
}

ReactDOM.render(
    <div>
        <Title style={{ color: 'grey', magin: '1px' }} title="hello" />
        <Title style={{ color: 'red', padding: '5px' }} title="world" />
    </div>,
    document.getElementById('root')
);

See the Pen React Component by melius102 (@melius102) on CodePen.

 

Component State

상태(State)가 없는 컴포넌트를 Stateless 컴포넌트라고 한다. 상태가 있는 컴포넌트를 Stateful 컴포넌트라고 하며, 상태는 state 객체를 사용하여 관리된다. 상태의 초기화는 생성자 함수에서 이루어지며, 상태 변경시에는 this.setState() 함수를 이용한다.

class Stateful extends React.Component {
    constructor(props) {
        super(props);
        this.state = { flag: true, text: "hello" };
        setTimeout(() => { this.setState({ text: "bye" }) }, 1000);
    }

    render() {
        return <h1 style={this.props.style}>{this.state.text}</h1>;
    }
}

ReactDOM.render(
    <Stateful style={{ color: 'grey' }} />,
    document.getElementById('root')
);

 

Event Handler

일반 HTML 이벤트 핸들러 속성명과 JSX 문법에서 이벤트 핸들러의 속성명는 차이가 있다.

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.eventHandler = this.eventHandler.bind(this);
    }

    eventHandler(e) {
        // console.log(this);
        const name = this.props.name;
        console.log(`hello, ${name}`);
    }

    render() {
        // console.log(this);
        return <div onClick={this.eventHandler}>click</div>;
    }
}

ReactDOM.render(<Hello name={"john"} />, document.getElementById('root'));