728x90

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

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

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

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


참조:

react docs 


React에서 이제 css를 입혀보도록 하자.


<!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 className="hello">Hello, {this.props.children || 'korean'}</h1>
            );
        }
    });

    ReactDOM.render(
        <div>
            <HelloWorld>kukaro</HelloWorld>
            <HelloWorld>jiharu</HelloWorld>
            <HelloWorld>you</HelloWorld>
        </div>,
        document.querySelector('#container')
    )
</script>
<style>
    .hello {
        color: red;
        background-color: yellow;
    }
</style>
</body>
</html>

여기서 새로운 style로 .hello를 선언했다.

이제 이를 연결하기 위해서 class와 연결하였다.


<h1 className="hello">Hello, {this.props.children || 'korean'}</h1>

여기서 className이라는 프로퍼티가 있다. 이는 원래는 없던건데 react만 존재하는 것이다.

이는 해당 class를 연결하게 된다.

한번 실행해보자.


제대로 적용되는걸 볼 수 있다.

이번에는 변수로서 한번 집어넣어보도록하자.


<!DOCTYPE html>
<html lang="kr">
<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 className={this.props.myclass}>Hello, {this.props.children || 'korean'}</h1>
            );
        }
    });

    ReactDOM.render(
        <div>
            <HelloWorld myclass="hello">kukaro</HelloWorld>
            <HelloWorld>jiharu</HelloWorld>
            <HelloWorld>you</HelloWorld>
        </div>,
        document.querySelector('#container')
    )
</script>
<style>
    .hello {
        color: red;
        background-color: yellow;
    }
</style>
</body>
</html>

이번에는 변수로서 사용하는 예시이다.


ReactDOM.render(
    <div>
        <HelloWorld myclass="hello">kukaro</HelloWorld>
        <HelloWorld>jiharu</HelloWorld>
        <HelloWorld>you</HelloWorld>
    </div>,
    document.querySelector('#container')
)

class를 변수로서 한번 넣어보자. 맨위의 한 값만 값을 지정해보자.


var HelloWorld = React.createClass({
    render: function () {
        return (
            <h1 className={this.props.myclass}>Hello, {this.props.children || 'korean'}</h1>
        );
    }
});

className으로 변수를 집어넣으면 여러분이 원하는 작업을 할 수 있게 된다,


값이 원하는데로 적용되었다.

아직 이 기능은 React스럽지는 않다.

물론 이렇게 쓰는경우도 많겠지만 react스럽게 하는 다른방법도 존재한다.

이는 다음 강의에서 설명하겠다.

저작자표시

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

[React-07]변수(state)와 이벤트 바인딩(event bind)그리고 라이프 사이클(life cycle)  (0) 2019.03.17
[React-06]css - react css스타일  (0) 2018.11.24
[React-04]props(변수처럼 사용하기)  (0) 2018.11.23
[React-03]React Compnent  (0) 2018.11.12
[React-02]createElement로 dom트리 만들기  (0) 2018.11.11

+ Recent posts

티스토리툴바