[React] state와 componentDidMount 활용 페이지 만들어보기 - 로또 번호 랜덤 생성 사이트 만들어 보기 4편

이체 Lotto Random 번호를 생성하는 Component를 만들어 기능을 만들어 보겠습니다.

 

2,3,4 번의 Component를 만들어 보겠습니다.

 

2 - NumberPlateComonent

3 - NumberPlateBoxComponent

4 - LottoNumberBoxComponent

 

3가지 기능을 만들어 보겠습니다.

 

1. NumberPlate

 

NumberPlateComponent는 체크박스와 랜덤 번호를 생성하는 버튼을 담고 있는 Component입니다.

lotto 폴더 밑에 number-plate 폴더를 생성한 뒤 4개의 파일을 생성합니다.

 

NumberPlateComponent.js

NumberPlateComponent.css

NumberPlateBoxComponent.js

NumberPlateBoxComponent.css

 

코드는 아래와 같이 작성해 줍니다.

NumberPlateComponent.js

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

class NumberPlateComponent extends Component {

    state = {
        selected : []
    }

    componentDidMount(){
        const {selected} = this.state;
        for(let i=1; i<47; i++){
            selected.push(false);
        } 
        this.setState({selected});
    }

    handleChange = (checked, number) => {
        console.log(number);
        const { selected } = this.state;
        selected[number-1] = checked;
        this.setState({selected});
    };

    render(){
        return(
            <div>
                <div className="number-plate-contents">
                    { this.state.selected.map((select, index) =>
                        <NumberPlateBoxComponent
                            key={index}
                            number={index+1}
                            selected={select}
                            handleChange={this.handleChange}
                        />
                    )}
                </div>
                <button className="number-button"> 버튼 생성</button>
            </div>
        );
    }
}
export default NumberPlateComponent;

    state = {
        selected : []
    }

state는 Component안에서 사용되는 비공개 함수입니다.

선언된 Component 안에서만 사용이 가능하며 state는 직접 수정하지 않아야 합니다.

코드 상에 보이는 this.setState(); 함수가 state값을 업데이트 하는 함수 입니다.

 

만약, this.state.selected = selected 와 같이 직접 수정하려고 한다면 랜더링이 일어나지 않을 수 있습니다.

    componentDidMount(){
        const {selected} = this.state;
        for(let i=1; i<47; i++){
            selected.push(false);
        } 
        this.setState({selected});
    }

componentDidMount()는 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다.

DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 됩니다.

외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치입니다. (리엑트 공홈 참조)

 

그래서 ComponentDidMount안에 selected를 초기화 해주는 로직을 두었습니다.

   handleChange = (checked, number) => {
        console.log(number);
        const { selected } = this.state;
        selected[number-1] = checked;
        this.setState({selected});
    };

체크 박스 선택시 이벤트를 받는 함수 입니다.

  { this.state.selected.map((select, index) =>
    <NumberPlateBoxComponent
      key={index}
      number={index+1}
      selected={select}
      handleChange={this.handleChange}
    />
 )}

seleted 배열에 있는 개수 만큼 NumberPlateBoxComponent를 생성해주는 부분입니다.

map으로 표현할때는 유니크한 키값을 설정해 주어야합니다.

readonly일때는 index로 설정해도 좋지만 변경사항이 있을때는 해당 요소의 id로 설정하는 것이 좋습니다.

selected와 handleChange는 NumberPlateBoxComponent에서 props라는 요소로 사용할 값과 함수를 전달하는 요소입니다.

 

NumberPlateBoxComponent.js

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

class NumberPlateBoxComponent extends Component {

    handleChange = (e) => {
        const { checked } = e.target;
        this.props.handleChange(checked, this.props.number);
    };
   
    render(){
        return(
            <div className="number-plate-box-contents">
                <div className="number-plate-box">
                    <input
                        type="checkbox"
                        checked={this.props.selected}
                        onChange={this.handleChange}
                    />
                    <span>{this.props.number}</span>
                </div>
            </div>
        );
    }
}
export default NumberPlateBoxComponent;

NumberPlateBoxComponent 코드는 부모로 부터 숫자를 받아 체크 박스로 표현해주는 요소입니다.

handleChange는 checkbox에 변화가 있을때 이벤트를 받아 부모의 handleChange 함수로 전달합니다.

 

위 코드를 완성 한뒤 LottoRandomSideMenu.js 파일에 아래와 같이 NumberPlateComponent를 추가해줍니다.

그리고 CSS를 추가해줍니다.

 

LottoRandomSideMenu.js

import React, {Component} from 'react';
import "./LottoRandomSideMenu.css";
import NumberPlateComponent from './number-plate/NumberPlateComponent';

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

LottoRandomSideMenu.css

.lotto-random-sidemenu{
    width: 300px;
    height: 600px;
    border: 1px solid #aeaeae;
}

 

NumberPlateComponent.css

.number-plate-contents{
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.number-button{
    width: 200px;
    height: 50px;
    color: white;
    background-color: steelblue;
    margin: 10px 50px;
    font-size: 20px;
    outline: none;
    cursor: pointer;
}

NumberPlateBoxComponent.css

.number-plate-box-contents{
    flex: 25%;
    flex-grow: 0;
}

.number-plate-box{
    padding: 10px;
}

.number-plate-box span{
    padding-left: 5px;
}

input[type=checkbox] {
    transform: scale(1.5);
}

LottoRandomHeader.css

.lotto-random-header{
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    font-size: 24px;
    border: 1px solid #aeaeae;
}

LottoRandomHeader.js

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

class LottoRandomHeader extends Component {
    render(){
        return(
            <div className="lotto-random-header">
                로또 랜덤 번호 생성기
            </div>
        );
    }
}
export default LottoRandomHeader;

 

자 이제 체크박스 영역은 어느정도 완성이 된것 같습니다.

아래와 같은 화면이 보이면 정상적으로 코드가 작성된 것 입니다.

 

2. LottoNumberBox

오른쪽에 랜덤으로 번호를 생성한 6가지를 번호를 표시해주는 영역을 만들어 보겠습니다.

lotto 폴더 밑에 lotto-box폴더 생성 후 아래 파일들을 만들어줍니다.

 

LottoBoxComponent.css

LottoBoxComponent.js

 

LottoBoxComponent.js

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

class LottoBoxComponent extends Component {
    state = {
        numbers : [1,2,3,4,5,6],
        b_number: 7
    }
    
    render(){
        return(
            <div className="lotto-box-contents">
                <div className="lotto-box">
                    {this.state.numbers.map(n=>
                        <div 
                            className="lotto-box-number"
                            key={n}
                        >{n}</div>
                    )}
                    <div className="lotto-box-plus">+</div>
                    <div className="lotto-box-number">{this.state.b_number}</div>
                </div>
            </div>
        );
    }
}
export default LottoBoxComponent;

LottoBoxComponent.js

.lotto-box{
    height: 60px;
    display: flex;
    margin: 20px;
    border: 1px solid #aeaeae;
    padding-left: 25px;
}

.lotto-box-number{
    width: 40px;
    height: 40px;
    border: 1px solid;
    margin: 10px 15px;
    text-align: center;
    font-size: 31px;
    border-radius: 50%;
}

.lotto-box-plus{
    width: 40px;
    height: 40px;
    margin: 8px;
    text-align: center;
    font-size: 31px;
}

LottoBoxComponent는 랜덤으로 생성된 로또 번호를 표시해줍니다.

CSS는 기본 정렬만 적용 했습니다.

 

예시 번호를 보여주기 위해 state를 활용하였고 이후 기능을 추가시에는 props를 사용할 것 입니다.

 

위 두개의 파일을 LottoRandomContents에 적용해 줍니다.

import React, {Component} from 'react';
import "./LottoRandomContents.css";
import LottoBoxComponent from './lotto-box/LottoBoxComponent';

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

코드를 모두 적용하면 화면은 아래와 같이 생성됩니다.

이제 버튼을 생성한 뒤 옆 화면에 랜덤으로 번호를 생성해주는 기능을 만들어 보겠습니다.

5편에서 계속됩니다~

 

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 만들기, 화면 호출하기