728x90

JavaScript와 HTML,CSS등에 대해서는 일체 다루지 않는다.

기초 지식은 다른 강의를 참조하도록 하라.

이 강의는 React의 사용법 위주로 작성되어 있다.

왜 React여야는지, React를 써야하는지에 대하지는 논하지 않으므로 그런 자료는 다른 데이터를 참조하라.


참조:

react docs


react를 사용하면서 element를 만드는 방법을 알았지만 엘리멘트 단위로 일일히 만드는건 사실 기존의 방법이 더 낫다.

우리는 element들을 다시 하나로 묶어서 또 다른 개체를 만들기를 원한다, 이를 SPA에서는 보통 component라고 부른다.

이번에는 react에서 컴포넌트단위로 만드는 법을 배우도록 하자.

바로 예제코드로 넘어간다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React World!</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function () {
            return (
                <h1>Hello, World!</h1>
            );
        }
    });

    ReactDOM.render(
        <div>
            <HelloWorld/>
        </div>,
        document.querySelector('#container')
    )
</script>
</body>
</html>

전체 코드이다. 너무 기니까 나눠서 보도록하자.


var HelloWorld = React.createClass({
    render: function () {
        return (
            <h1>Hello, World!</h1>
        );
    }
});

컴포넌트를 만드는 코드이다. 위의 코드는 HelloWorld라는 컴포넌트를 만들었다.


ReactDOM.render(
    <div>
        <HelloWorld/>
    </div>,
    document.querySelector('#container')
)

이 코드는 컴포넌트를 불러온다.

그러면 여러분이 만든 HelloWorld컴포넌트가 치환되서 들어가게 된다.

한번 실행시켜 보자.


제대로 실행되는 것을 확인할 수 있다.


이제 컴포넌트 단위로 나누었으므로 여러번 호출하는 것도 가능하다.

ReactDOM.render(
    <div>
        <HelloWorld/>
        <HelloWorld/>
        <HelloWorld/>
    </div>,
    document.querySelector('#container')
)

한번 세번 호출하여 보자.


이게 바로 컴포넌트의 힘이다. 여러번 호추해도 문제가 없다.

여기서 한가지 짚고 넘어가야할 부분이 있다.


ReactDOM.render(
    <div>
        <HelloWorld/>
        <HelloWorld/>
        <HelloWorld/>
    </div>,
    document.querySelector('#container')
)

여기서 보면 HelloWorld컴포넌트를 div로 감싸고 있다.

중요한건 이거다. 무조건 최상위 컴포넌트로 감싸야만 동작한다는 것이다.

즉 최상위 element는 반드시 하나여야한다.

왜 이렇게 만드냐면 JSX가 JavaScript로 바뀌는 과정에서 최상위 엘리먼트를 추적하는데 그게 여러개면 처리하기 힘들기 때문에

구현단계에서 부터 이런 설계를 강요하는 것이다. 이는 vue나 angular역시 동일하다.


var customH1El = React.createElement(
    'h1',
    null,
    'Hello, World!'
);

var HelloWorld = React.createClass({
    render: function () {
        return (
            customH1El
        );
    }
});

ReactDOM.render(
    <div>
        <HelloWorld/>
        <HelloWorld/>
        <HelloWorld/>
    </div>,
    document.querySelector('#container')
)

위의 컴포넌트는 다시 element구조로 나눌수 있다.


다음 장에서는 component의 속성에 대해서 알아보도록 하자.



저작자표시

'Programming > JavaScript-React' 카테고리의 다른 글

[React-06]css - react css스타일  (0) 2018.11.24
[React-05]css - 기존 css스타일  (0) 2018.11.24
[React-04]props(변수처럼 사용하기)  (0) 2018.11.23
[React-02]createElement로 dom트리 만들기  (0) 2018.11.11
[React-01]React 시작하기  (0) 2018.11.06

+ Recent posts

티스토리툴바