728x90

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

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

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

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


참조:

react docs


<!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>
hi
<script type="text/babel">
    ReactDOM.render(
        <h1>Hello World</h1>,
        document.body
    );
</script>
</body>
</html>

위의 코드는 자바스크립트 문법이아니다. 애당초 자바스크립트였다면 저안에 html을 raw하게 넣는것은 불가능하다고 보면된다.

이러한 문법을 JSX라고 하는데 보기 좋지 않으므로 java script문법을 치환해서 사용할 수 있다.

그 방법중 하나가 바로 createElement이다.




엘리먼트로 하나의 노드를 만드는 방식으로 사용하는 것이다.

각각의 파라메터는 만들 타입과 속성(js object), 자식(js array)를 넣어주면된다.


<!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">
    ReactDOM.render(React.createElement(
        "h1",
        null,
        "Hello World"
    ), document.querySelector('#container'));
</script>
</body>
</html>

위의 구조에서는 드디어 자바스크립트 같아졌다.

container라는 div에 h1태그로 HelloWorld를  추가시켰다.

이 구조는 아래같은 구조 역시 만들 수 있게된다.


<!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 brElement = React.createElement(
        'br',
        null,
        null
    );
    var inputTextElement = React.createElement(
        'input',
        {type: 'text', value: 'this is text'},
        null
    );
    var inputSubmitElement = React.createElement(
        'input',
        {type: 'submit', value: 'this is submit'},
        null
    );
    var formElement = React.createElement(
        'form',
        null,
        [inputTextElement, brElement, inputSubmitElement]
    );
    ReactDOM.render(formElement, document.querySelector('#container'));
</script>
</body>
</html>

여러태그를 중첩해서 트리구조로 만들수 있다.

더 복잡한 구조를 엘리멘트별로 쪼개서 만들 수 있다.


하지만 엘리먼트 단위로 코딩을 하는것은 사실상 불가능하다.

따라서 우리는 다시 이 엘리먼트를 컴포넌트라는 단위로 합쳐서 코딩하게 될 것이다.

저작자표시

'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-03]React Compnent  (0) 2018.11.12
[React-01]React 시작하기  (0) 2018.11.06

+ Recent posts

티스토리툴바