[React] props 하위 Component 값 전달하기 - 로또 번호 랜덤 생성 사이트 만들어 보기 5편

1. Props란 ?

 

우선 Props를 간단히 설명하면 사용자 컴포넌트의 엘리먼트 인자를 해당 컴포넌트의 단일 객체로 전달하는데 이것이 Props 입니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

예시로 보면 더욱 쉽게 이해가 가능합니다.

위의 코드는 React 공홈에 있는 예제 입니다.

 

함수 컴포넌트를 사용하였으며 Welcome 사용자 컴포넌트를 확인 할 수 있습니다.

이때, name 이라는 인자를 선억하였는데 이것을 Welcome 컴포넌트에 전달하는 전달할때 Props 단일 객체로 전달합니다.

그래서 우리는 이 인자를 사용하려면 예제이 있는 것 처럼 props.name을 사용합니다.

 

만약, 클래스 컴포넌트라면 this.props.name으로 사용합니다

 

2. Props를 활용하여 기능 추가하기.

이제 props를 활용하여 자식Component에 값과 함수를 전달하여 기능을 구현해보겠습니다

그림과 같이 최산당의 state를 props로 전달해보겠습니다.

2-1 LottoRandomTemplate state 추가하기.

 

로또 번호를 생성하기 위해 선택한 값을 받아야 합니다.

초기 LottoPlate에 번호를 생성하기 위해 선언했던 state 값들은 LottoRandom Template으로 옮깁니다.

 

그리고 LottoRandomSideMenu에 엘리먼트를 선언합니다.

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 : []
    }

    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 className="lotto-random-template">
                <LottoRandomHeader/>
                <div className="lotto-random-main">
                    <LottoRandomSideMenu
                        selected={this.state.selected}
                        handleChange={this.handleChange}
                    />
                    <LottoRandomContents/>
                </div>
            </div>
        );
    }
}

export default LottoRandomTemplate;

이제 LottoRandomSideMenu에서는 props로 선언된 엘리먼트를 받을 수 있습니다.

이 값을 이제 LottoPlate에 그대로 넘겨 줍니다.

 

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
                    selected={this.props.selected}
                    handleChange={this.props.handleChange}
                />
            </div>
        );
    }
}
export default LottoRandomSideMenu;

그리고 NumberPlateComponent에 state로 선언되어 있는 부분을 props로 변경해줍니다.

 

LottoPlateComponent.js

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

class NumberPlateComponent extends Component {

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

 

이제 변경된 후 화면이 이전과 같이 랜더링 되는지 확인합니다.

이제 버튼을 클릭하면 랜덤으로 번호를 생성하는 기능을 만들어야 합니다.

 

버튼을 클릭 했을 때 이벤트를 받는 부분은 아직 구현이 안되었는데

동일하게 가장 최상단부터 함수를 생성하여 전달합니다.

 

2-2 LottoRandomTemplate 버튼 함수 연결 하기.

 

LottoRandomTemplate에 아래 함수를 추가 합니다

추가하면서 state에도 lottoNumbers를 추가해주세요.

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 = () => {
        console.log("click")
        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{
            alert("로또 번호를 생성합니다.")
        }
    }

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

export default LottoRandomTemplate;

lottoNumbers는 로또 번호를 생성하여 담아줄 배열 입니다.

handleButtonOnClick은 번호생성 버튼을 클릭했을때 동작하는 함수 입니다.

체크박스에 체크한 번호를 담은 후 선택한 번호의 개수가 7이상이면 번호를 생성하고 7개가 안되면 알림으로 사용자에게 알려줍니다.

하위 컴포넌트에 엘리먼트도 추가해줍니다.

 

이제 버튼까지 함수를 전달해주기 위해 다른 컴포넌트에도 엘리먼트를 선언합니다.

 

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
                    selected={this.props.selected}
                    handleChange={this.props.handleChange}
                    handleButtonOnClick={this.props.handleButtonOnClick}
                />
            </div>
        );
    }
}
export default LottoRandomSideMenu;

LottoPlateComponent.js

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

class NumberPlateComponent extends Component {

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

이제 버튼을 클릭했을때 팝업메세지가 뜬다면 정상적으로 전달 된 것입니다.

 

이제 최상위 컴포넌트에 버튼을 눌렀다는 이벤트를 전달 할 수 있습니다.

로또 번호 생성 로직을 추가하여 LottoRandomContents에 번호를 표시해주면 되겠죠?

 

로또 번호를 생성하는 로직은 다음편에 진행하겠습니다.

 

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