React Basic - 13 . 컴포넌트 분리와 props / 주석 / 숫자 야구 완성

반복문의 부분은 별도로 분리하여 처리할 수 있다.

import React, {Component} from 'react';

class Try extends Component {
    render(){
        return (

            <li>
                <b>{v.fruit}</b> - {i}
                <div>컨텐츠1</div>
                <div>컨텐츠2</div>
                <div>컨텐츠3</div>
                <div>컨텐츠4</div>
            </li>
        )
    }
}

export default Try;

이와같이 별도의 분리한 반복문 파일을 만들어 불러올 수 있다.

baseball.jsx

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

// 숫자 4개를 겹치지 않고 뽑기
function getNumbers(){

}

class Baseball extends Component {
    state = {
        result : '',
        value : '',
        answer : getNumbers(),
        tries : {}
    };

    onSubmitForm = e=>{
        
    };

    onChangeInput = () =>{

    };
    input;

    fruits = [
        {fruit:'사과',characteristic:'달다'},
        {fruit:'딸기',characteristic:'상큼하다'},
        {fruit:'배',characteristic:'아삭하다'},
        {fruit:'복숭아',characteristic:'달콤새콤'},
        {fruit:'포도',characteristic:'재밌다'},
    ];

    render(){
        return(
            <>
                <h1>{this.state.result}</h1>
                <form onSubmit={this.onSubmitForm}>
                    <input maxLength={4} value={this.state.value} onChange={this.onChangeInput}/>
                </form>
                <div>시도 : {this.state.tries.length}</div>
                <ul>
                    {this.fruits.map((v, i)=>{
                        return (
                           <Try/>
                        );
                    })}
                </ul>
            </>
        );
    }
}

export default Baseball;

파일의 분리를 통해서 가독성을 높이고 코드 관리를 유용하게 할 수 있다. 또한 재사용성을 높인다.

이 때 매개변수인 v, i가 Try에 전달되지 않는다. 이 문제를 해결해주어야 한다. 이 v, i를 받을 방법이 props이다.

  return (
    <Try value={v} index={i}/>
  );

이때 baseball.jsx에서 props를 적용해주고 Try.jsx에서 아래와 같이 적용시켜줄 수 있다.

class Try extends Component {
    render(){
        return (
            <li>
                <b>{this.props.value.fruit}</b> - {this.props.index}
                <div>컨텐츠1</div>
                <div>컨텐츠2</div>
                <div>컨텐츠3</div>
                <div>컨텐츠4</div>
            </li>
        )
    }
}

react의 주석

jsx에서 주석은 {/* */} 와 같은 방식으로 사용한다.

이를 통해 야구 맞추기 게임을 아래와 같이 만들 수 있다.

baseball.jsx

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

// 숫자 4개를 겹치지 않고 뽑기
function getNumbers(){
    const candidate = [1,2,3,4,5,6,7,8,9];
    const array = [];
    for(let i = 0; i < 4; i += 1){
        const chosen = candidate.splice(Math.floor(Math.random() * (9 - i)), 1)[0];    
        array.push(chosen);
    }
    return array;
}

class Baseball extends Component {
    state = {
        result : '',
        value : '',
        answer : getNumbers(),
        tries :[],
    };

    onSubmitForm = e=>{
        e.preventDefault();
        if(this.state.value === this.state.answer.join('')){ // 만약 [1,3,5,6]이 뽑혔다면 
            this.setState({
                result : '홈런',
                tries : [...this.state.tries, {try:this.state.value, result : '홈런'}],
            })
            alert("게임을 다시 시작합니다.");
            this.setState({
                value: '',
                answer: getNumbers(),
                tries : [],
            });
        }else{
            const answerArray = this.state.value.split('').map((v) => parseInt(v));
            let strike = 0;
            let ball = 0;
            if (this.state.tries.length >= 9){
                this.setState({
                    result :`10번 틀려서 실패 ! 답은 ${answer.join(',')}였습니다.`,
                });
                alert("게임을 다시 시작합니다.");
                this.setState({
                    value: '',
                    answer: getNumbers(),
                    tries : [],
                });
            } else{
                for (let i = 0; i < 4; i += 1){
                    if(answerArray[i] === this.state.answer[i]){
                        strike += 1;
                    }else if(this.state.answer.includes(answerArray[i])){
                        ball += 1;
                    }
                }
                this.setState({
                    tries: [...this.state.tries, {try: this.state.value, result: `${strike} 스트라이크, ${ball}볼 입니다.`}],
                })
            }
        }
    };

    onChangeInput = e =>{
        this.setState({
            value : e.target.value,
        });
        console.log(this.state.answer);
        
    };
    input;

    render(){
        return(
            <>
                <h1>{this.state.result}</h1>
                <form onSubmit={this.onSubmitForm}>
                    <input maxLength={4} value={this.state.value} onChange={this.onChangeInput}/>
                </form>
                <div>시도 : {this.state.tries.length}</div>
                <ul>
                    {this.state.tries.map((v, i)=>{
                        return (
                           <Try key={`${i+1}차 시도 :`} tryInfo={v}/>
                        );
                    })}
                </ul>
            </>
        );
    }
}

export default Baseball;

try.jsx

import React, {Component} from 'react';

class Try extends Component {
    render(){
        return (
            <li>
                <div>{this.props.tryInfo.try}</div>
                <div>{this.props.tryInfo.result}</div>
            </li>
        )
    }
}

export default Try;