[React] React create-react-app 프로젝트 설명 및 Components 생성 하기 - 로또 번호 랜덤 생성 사이트 만들어 보기 3편

간단한 웹사이트 디자인을 완료하였고 어떻게 Component를 나눌지 정해졌기에 이제 Component를 나눠 생성해보겠습니다.

우선, 생성하기전 create-react-app 으로 생성한 기본구조를 알아보고 Components 폴더를 생성한 뒤 Components들을 생성하겠습니다.

 

1. 기본 폴더 구조

• index.js : react app의 가장 먼저 진입점이 되는 js 파일
• App.js : index.js에서 root로 렌더링 되는 페이지

1-1. index.js

index.js는 엔트리 포인트가 되는 파일입니다.

index.js 먼저 살펴보면 다음과 같은 코드를 확인할 수 있습니다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ReactDOM.render(<App />, document.getElementById('root'));

코드를 살펴보면 App.js를 받아 root로 랜더링 하고 있습니다.

이 의미는 우리는 App.js만 수정하면 웹 페이지를 변경할 수 있다는 의미입니다.

serviceWorker.unregister();

serviceWorker는 오프라인일 때 리소스를 캐싱하여 온라인처럼 보여주는 모듈입니다. 

기본은 unregister로 되어 있으며 필요시 변경하면 됩니다.

1-2 App.js

App.js이 root로 랜더링 되면서 화면에 표시되게 됩니다.

화면을 변경하려면 App.js를 살펴봐야겠죠.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.js를 살펴보면 익숙하면서도 조금 다른 것 같은 Html코드를 볼 수 있습니다.

이는 React에서 사용하는 JSX 문법입니다.

 

JSX를 자세히 알고 싶으시다면 JSX 소개 글을 확인하시면 좋습니다.

 

JSX는 Javascript에 가깝기 때문에 HTML 문법보다는 CamelCase로 작성해야 합니다.

예를 들면 class는 className으로 tabindex는 tabIndex로 작성해야 됩니다.

이점을 생각하고 코드를 작성하면 html과 비슷하게 작성할 수 있습니다.

2. Compnents 생성하기

앞서 로또 랜덤 번호 사이트 만들기 2편에서 Component를 7개 생성하고자 했으므로 각각의 기능에 맞게 생성해보도록 하겠습니다.

우선 src 경로 밑에 components 폴더를 생성합니다.

src/
 components/
 App.css
 App.js
 index.css
 index.js

 

폴더를 생성하고 App.js파일을 먼저 변경하도록 하겠습니다.

함수형과 클래스형 Component가 있는데 보편적으로 사용하는 클래스형으로 변경하겠습니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
      </div>
    );
  }  
}

export default App;

그리고 App.css, App.test.js, logo.svg를 삭제합니다.

우리는 이제 사용하지 않습니다.

 

LottoRandomTemplate Component를 생성합니다.

이 Component는 2편에서 디자인한 Lotto Random 페이지입니다.

 

components 폴더 밑에 LottoRandomTemplate.js를 생성하고 아래 코드를 입력해줍니다.

import React, {Component} from 'react';

class LottoRandomTemplate extends Component {
    render(){
        return(
            <div>
                LottoRandomTemplate
            </div>
        );
    }
}

export default LottoRandomTemplate;

그리고 App.js에 아래와 같이 변경시켜 줍니다.

import React, { Component } from 'react';
import LottoRandomTemplate from './components/LottoRandomTemplate';

class App extends Component {
  render() {
    return (
      <div className="App">
        <LottoRandomTemplate/>
      </div>
    );
  }  
}

export default App;

 

이러면 페이지가 변경되면서 LottoRandomTemplate Text만 보이면 완성되었습니다.

 

header, sidemenu, contents Component를 생성하여 LottoRandomTemplate에 연결시켜 줍니다. 

사실 많은 개발 내용이 없다면 1페이지에 만드시는 것이 좋습니다.

하지만 React를 시작할 때 여러 Component로 나누는 연습을 하시면 좋기 때문에 이번 강의에서는 모두 나눠서 진행해보겠습니다.

 

components 폴더 밑에 lotto 폴더를 생성하고 LottoRandomHeader, LottoRandomSideMenu, LottoRandomContents를 생성합니다.

코드는 아래와 같이 각각 생성합니다.

import React, {Component} from 'react';
import "./LottoRandomHeader.css";

class LottoRandomHeader extends Component {
    render(){
        return(
            <div className="lotto-random-header">
                LottoRandomHeader
            </div>
        );
    }
}
export default LottoRandomHeader;

import React, {Component} from 'react';
import "./LottoRandomSideMenu.css";

class LottoRandomSideMenu extends Component {
    render(){
        return(
            <div className="lotto-random-sidemenu">
                LottoRandomSideMenu
            </div>
        );
    }
}
export default LottoRandomSideMenu;

import React, {Component} from 'react';
import "./LottoRandomContents.css";

class LottoRandomContents extends Component {
    render(){
        return(
            <div className="lotto-random-contents">
                LottoRandomContents
            </div>
        );
    }
}
export default LottoRandomContents;

 

 

그리고 각각의 css 파일을 생성해줍니다.

아래와 같이 파일들을 만들었는지 확인해주세요.

 

이제 CSS를 적용하여 그리드를 나눠 보겠습니다.

CSS에 대해서는 자세히 설명하지는 않겠습니다.

파일마다 아래를 작성해주세요.

 

LottoRandomTemplate.css

.lotto-random-template{
    margin: auto;
    width: 970px;
    height: 100vh;
}

.lotto-random-main{
    width: 970px;
    display: flex;
}

LottoRandomHeader.css

.lotto-random-header{
    width: 100%;
    height: 60px;
    background-color: yellowgreen;
}

LottoRandomSideMenu.css

.lotto-random-sidemenu{
    width: 300px;
    height: 600px;
    background-color: steelblue;
}

LottoRandomContents.css

.lotto-random-contents{
    width: 677px;
    height: 600px;
    background-color: darkolivegreen;
}

그리고 LottoRandomTemplate.js 파일을 업데이트해줍니다.

import React, {Component} from 'react';
import LottoRandomHeader from './lotto/LottoRandomHeader';
import LottoRandomSideMenu from './lotto/LottoRandomSideMenu';
import LottoRandomContents from './lotto/LottoRandomContents';

import "./LottoRandomTemplate.css"

class LottoRandomTemplate extends Component {
    render(){
        return(
            <div className="lotto-random-template">
                <LottoRandomHeader/>
                <div className="lotto-random-main">
                    <LottoRandomSideMenu/>
                    <LottoRandomContents/>
                </div>
            </div>
        );
    }
}

export default LottoRandomTemplate;

이렇게 업데이트하면 화면이 아래와 같이 변합니다.

카카오 오븐으로 간단히 디자인했던 그리드와 거의 동일하게 되었습니다.

이제 기획했던 기능을 만들어야겠죠?

 

기능을 다음 편에서 이어서 진행하겠습니다.

다음 편에서는 체크 박스 Component와 랜덤으로 생성하는 번호를 표시해주는 기능을 만들어보겠습니다.

 

React로 로또 번호 랜덤 사이트 만들어 보기 강의 목록

1편 - [React] React 프로젝트 생성하기

2편 - [React] UI 디자인 툴 - 카카오 오븐 사용하여 사이트 디자인해보기

3편 - [React] React Component 분리 및 생성 하기

4편 - [React] state와 componentDidMount 활용 페이지 만들어보기

5편 - [React] props 하위 Component 값 전달하기 

6편 - [React] Javascript 로또 번호 생성 알고리즘

7편 - [React] 로또 당첨 번호 API 사용하여 Get API 만들기, 화면 호출하기