[React] Javascript 로또 번호 생성 알고리즘 - 로또 번호 랜덤 생성 사이트 만들어 보기 6편

이제 로또 번호를 생성하는 알고리즘을 짜보도록 하겠습니다.

생각보다 간단히 로또 번호를 생성하는 알고리즘을 만들 수 있습니다.

1. Javscript 로또 번호 알고리즘 

로또 번호를 생성하는 알고리즘은 다양합니다.

선택한 번호로 6개 + 보너스 번호 1개를 뽑아주는 알고리즘이 있을 수 있으며

제외한 번호로 6개 + 보너스 번호 1개를 뽑아주는 알고리즘이 있을 수 있겠죠.

아니면 무조건 46개의 숫자중 7개를 뽑아 보여주는 알고리즘도 있을 수 있습니다.

 

번호를 선택하는 것 외에 중복된 숫자를 제외하고 7개를 뽑아내는 것은 동일합니다.

그래서 아래 알고리즘은 선택한 번호들 가운데 6개 + 보너스 번호 1개를 뽑아주는 알고리즘입니다.

 

참고하셔서 자신이 필요한 알고리즘을 만들면 됩니다.

 

1-1 선택한 번호들 가운데 6개 + 보너스 번호 1개를 뽑아내는 알고리즘

selectLotto = (lottoNumber, numbers) => {
  if(lottoNumber.length === 7) {
    const temp = lottoNumber.slice(0,6);
    temp.sort((a,b)=>a-b);
    temp.push(lottoNumber[6]);
    return temp
  }
  let n = numbers[Math.floor(Math.random() * numbers.length)];
  if(lottoNumber.indexOf(n) < 0 ){
  	lottoNumber.push(n);
  }
  return this.selectLotto(lottoNumber, numbers);
}

selectLotto 재귀 함수를 만들어 로또 번호를 생성할 것입니다.

재귀 함수랑 원하는 결과가 나오기 전까지 계속 반복해서 자기 자신을 호출 하는 함수 입니다.

return this.selectLotto(lottoNumber, numbers);

코드를 보면 마지막에 원하는 결과가 없기 때문에 다시 자기 자신을 호출하죠.

selectLotto = (lottoNumber, numbers)

함수에서 받는 변수들은 lottoNumber와 numbers 입니다.

lottoNumber는 선택한 번호를 추가하는 배열 변수이며 numbers는 앞서 선택된 번호들이 담겨 있는 배열입니다.

let n = numbers[Math.floor(Math.random() * numbers.length)];
if(lottoNumber.indexOf(n) < 0 ){
	lottoNumber.push(n);
}

numbers에 있는 번호만큼 랜덤으로 숫자를 생성하여 가져온 뒤 lottoNumber에 숫자가 있지 않으면 추가합니다.

if(lottoNumber.length === 7) {
  const temp = lottoNumber.slice(0,6);
  temp.sort((a,b)=>a-b);
  temp.push(lottoNumber[6]);
  return temp
}

이제 7개의 번호가 뽑혔다면 먼저 뽑은 6개의 로또 번호이므로 번호 순서대로 재정렬 한 뒤 마지막 보너스 번호를 추가합니다.

마지막으로 return 된 7개의 숫자 배열은 순서대로 6개 번호 + 1개 보너스 번호가 됩니다.

 

이제 이 로직으로 LottoBoxComponent의 Props로 전달하겠습니다.

2. LottoBoxComponent에 Props를 활용하여 번호 전달하기.

제일 상단에 위 함수를 추가해 줍니다.

그리고 버튼을 눌렀을때 해당 함수가 호출되도록 추가합니다.

 

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 {

    state = {
        selected : [],
        lottoNumbers : []
    }

    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});
    };

    handleButtonOnClick = () => {
        const {selected, lottoNumbers} = this.state;
        const numbers = [];
        let selectedNumberCount = 0;

        selected.forEach((s, i) => {
            if(s) {
                selectedNumberCount++;
                numbers.push(i+1);
            }
        })

        if(selectedNumberCount < 7){
            alert("7개 이상 번호를 선택해야 합니다.")
            return;
        }else{
            const lotto = this.selectLotto([], numbers);
            lottoNumbers.push(lotto);
            this.setState({lottoNumbers});   
        }
    }

    selectLotto = (lottoNumber, numbers) => {
        if(lottoNumber.length === 7) {
            const temp = lottoNumber.slice(0,6);
            temp.sort((a,b)=>a-b);
            temp.push(lottoNumber[6]);
            return temp
        }
        let n = numbers[Math.floor(Math.random() * numbers.length)];
        if(lottoNumber.indexOf(n) < 0 ){
            lottoNumber.push(n);
        }
        return this.selectLotto(lottoNumber, numbers);
    }


    render(){
        return(
            <div className="lotto-random-template">
                <LottoRandomHeader/>
                <div className="lotto-random-main">
                    <LottoRandomSideMenu
                        selected={this.state.selected}
                        handleChange={this.handleChange}
                        handleButtonOnClick={this.handleButtonOnClick}
                    />
                    <LottoRandomContents
                        lottoNumbers={this.state.lottoNumbers}
                    />
                </div>
            </div>
        );
    }
}

export default LottoRandomTemplate;

그리고 LottoRandomContetents에 lottoNumbers 엘리먼트를 선언하여 lottoNumbers를 추가합니다.

 

LottoRandomContetents.js

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

class LottoRandomContents extends Component {
    render(){

        const {lottoNumbers} = this.props;
        
        return(
            <div className="lotto-random-contents">
                {lottoNumbers.map((lottoNumber, i) => 
                <LottoBoxComponent
                key={i}
                lottoNumber={lottoNumber}
                />)}
                

            </div>
        );
    }
}
export default LottoRandomContents;

LottoRandomConetns에서 props로 전달받은 lottoNumber를 다시 LottoBoxComponent를 전달하는데

lottoNumber는 배열의 집합이므로 map을 사용하여 배열의 개수만큼 만들어 줍니다.

 

LottoBoxComponent.js

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

class LottoBoxComponent extends Component {
    
    render(){
        const numbers = this.props.lottoNumber.slice(0,6);
        const b_number = this.props.lottoNumber[6];
        return(
            <div className="lotto-box-contents">
                <div className="lotto-box">
                    {numbers.map((n,i)=>
                        <div 
                            className="lotto-box-number"
                            key={i}
                        >{n}</div>
                    )}
                    <div className="lotto-box-plus">+</div>
                    <div className="lotto-box-number">{b_number}</div>
                </div>
            </div>
        );
    }
}
export default LottoBoxComponent;

LottoBoxComponent는 기존 state로 되어 있던 값들을 props로 변경하여 전달된 번호가 표시되도록 수정합니다.

화면이 정상적으로 표시되도록 css를 추가합니다.

 

LottoBoxComponent.css

.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;
}

LottoRandomContents.css

.lotto-random-contents{
    width: 677px;
    height: 600px;
    border: 1px solid #aeaeae;
    overflow: scroll;
}

이제 화면으로 테스트 해볼 시간입니다.

화면에서 원하는 번호를 7개 이상 선택합니다.

그리고 번호 생성 버튼을 클릭하면 옆에 Contents 영역에 번호가 생성되는지 확인해봅시다.

 

위와 같이 번호가 생성되었다면 완료!

 

이렇게 React로 간단하게 번호를 생성하는 법을 알아보았습니다.

이제 Api를 호출하여 최근 당첨번호를 가져오는 부분을 추가해보겠습니다.

 

물론 다음편에서요! :)

 

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