로메오의 블로그

[DApp - react.js] Election 화면을 React.js로 변경 - Component 나누기 본문

Backend/Python & Blockchain

[DApp - react.js] Election 화면을 React.js로 변경 - Component 나누기

romeoh 2019. 7. 8. 05:29
반응형

/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>투표 결과</title>
</head>

<body>
    <div id="root" class="container" style="width: 650px;"></div>
    <script src="build.js"></script>
</body>
</html>

react용 root컴포넌트 추가하고

build.js 파일을 불러옵니다.

webpack에서 output을 build.js 로 build 합니다.

 

/src/App.js

webpack.config.js에서 App.js 파일을 entry로 설정했기 때문에 App.js가 react의 시작이 됩니다.

entry: path.join(__dirname, 'src/js', 'App.js'),
$ touch src/js/App.js

 

App.js의 기본 구조는 아래와 같습니다.

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {

    constructor(props) {
        super(props)
    }

    componentDidMount() {

    }

    render() {
        return (
          <div>
              <h1>hello world</h1>
          </div>
        )
    }
}

ReactDOM.render(
   <App />,
   document.querySelector('#root')
)

webpack-dev-server 서버구동

$ npm run dev

development 모드로 빌드하고 새로운 터미널을 열어서 서버를 구동합니다.

$ npm run start

 

render 쪽에 html 구조를 추가하겠습니다.

[DAPP] 투표하기 화면 구현

위 포스트에서 index.html 파일을 render로 구현하는것이니 참조하세요.

 

/src/App.js

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {

    constructor(props) {
        super()
    }

    componentDidMount() {

    }

    render() {
        return (
            <React.Fragment>
                <h1>투표 결과</h1>

                {/* <!-- 로딩바 --> */}
                <div id="loader">
                    <p>로딩중...</p>
                </div>
            
                <div id="content">
            
                    {/* <!-- 투표결과 표시 --> */}
                    <table>
                        <colgroup>
                            <col width="60" />
                            <col width="*" />
                            <col width="100" />
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col">기호</th>
                                <th scope="col">이름</th>
                                <th scope="col">득표수</th>
                            </tr>
                        </thead>
                        <tbody id="candidatesResults">
                        </tbody>
                    </table>
                    <hr />
            
                    {/* <!-- 투표하기 --> */}
                    <h2>투표 참여</h2>
                    <select id="candidateSelect">
                        <option value="">후보자를 선택하세요.</option>
                    </select>
                    <button id="btnVote">투표하기</button>
                    <hr />
            
                    {/* <!-- 계정 정보 표시 --> */}
                    <p id="accountAddress"></p>
                </div>
            </React.Fragment>
        )
    }
}

ReactDOM.render(
   <App />,
   document.querySelector('#root')
)

index.html 파일에 있던 dom 구조를 render에 옮겼습니다.

react.js는 dom의 문법에 매우 까다롭기 때문에 일부 태그를 수정해야 합니다.

예를 들어 <hr>을 <hr />로 수정하고 style 속성은 제거합니다.

 

기본 틀이 화면에 나타납니다.

로딩 부분과 content 부분을 Content.js 에 콤포넌트로 만들겠습니다.

 

src/js/Content.js

$ touch src/js/Content.js
import React from 'react'

export default class Content extends React.Component {
    render() {
        return (
            <div id="content">

                {/* <!-- 투표결과 표시 --> */}
                <table>
                    <colgroup>
                        <col width="60" />
                        <col width="*" />
                        <col width="100" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th scope="col">기호</th>
                            <th scope="col">이름</th>
                            <th scope="col">득표수</th>
                        </tr>
                    </thead>
                    <tbody id="candidatesResults">
                    </tbody>
                </table>
                <hr />

                {/* <!-- 투표하기 --> */}
                <h2>투표 참여</h2>
                <select id="candidateSelect">
                    <option value="">후보자를 선택하세요.</option>
                </select>
                <button id="btnVote">투표하기</button>
                <hr />

                {/* <!-- 계정 정보 표시 --> */}
                <p id="accountAddress"></p>
            </div>
        )
    }
}

App.js 에서 Content 부분을 가져와서 넣어줍니다.

src/js/App.js

import React from 'react'
import ReactDOM from 'react-dom'
import Content from './Content'

class App extends React.Component {

    constructor(props) {
        super()
    }

    componentDidMount() {

    }

    render() {
        return (
            <React.Fragment>
                <h1>투표 결과</h1>

                {/* <!-- 로딩바 --> */}
                <div id="loader">
                    <p>로딩중...</p>
                </div>
            
                {/* Content compoent를 추가함 */}
                <Content/>
                
            </React.Fragment>
        )
    }
}

ReactDOM.render(
   <App />,
   document.querySelector('#root')
)

Content 컴포넌트를 import 하고 <Content> 를 추가합니다.

 

Table.js, Form.js 추가

Content.js 에서 table 부분과 select 부분을 다시 컴포넌트로 분리하겠습니다.

$ touch src/js/Table.js
$ touch src/js/Form.js

src/js/Content.js

import React from 'react'
import Table from './Table'
import Form from './Form'

export default class Content extends React.Component {
    render() {
        return (
            <div id="content">

                {/* <!-- 투표결과 표시 --> */}
                <Table />

                {/* <!-- 투표하기 --> */}
                <Form />

                {/* <!-- 계정 정보 표시 --> */}
                <p id="accountAddress"></p>
            </div>
        )
    }
}

src/js/Table.js

import React from 'react'

export default class Content extends React.Component {
    render() {
        return (
            <React.Fragment>
                {/* <!-- 투표결과 표시 --> */}
                <table>
                    <colgroup>
                        <col width="60" />
                        <col width="*" />
                        <col width="100" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th scope="col">기호</th>
                            <th scope="col">이름</th>
                            <th scope="col">득표수</th>
                        </tr>
                    </thead>
                    <tbody id="candidatesResults">
                    </tbody>
                </table>
                <hr />
            </React.Fragment>
        )
    }
}

src/js/Form.js

import React from 'react'

export default class Content extends React.Component {
    render() {
        return (
            <React.Fragment>
                {/* <!-- 투표하기 --> */}
                <h2>투표 참여</h2>
                <select id="candidateSelect">
                    <option value="">후보자를 선택하세요.</option>
                </select>
                <button id="btnVote">투표하기</button>
                <hr />
            </React.Fragment>
        )
    }
}

webpack에서 watch가 작동하고 있기 때문에 수정후 저장하면 브라우저는 자동으로 새로고침하며 결과를 보여주고 있습니다.

 

반응형

'Backend > Python & Blockchain' 카테고리의 다른 글

[Facial Recognition] 단체사진에서 인원수 알아내기  (0) 2019.07.19
[DApp - react.js] Election 화면을 React.js로 변경 - back-end 연결  (0) 2019.07.08
[DApp - react.js] Election 화면을 React.js로 변경하기 - 환경설정  (0) 2019.07.08
[DApp] Watch Event Listener  (2) 2019.07.08
[DApp] 투표하기 화면 구현  (1) 2019.07.07
'Backend/Python & Blockchain' Related Articles more
Comments