[React] 1-7 (클래스 메서드 )구구단 리액트로 만들기(2)

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

변할것들을 state로 만들고 변할것들 위치에 state 넣어주고!

input에 글자를 바로 쓸수 없으니 onChange로 글자가 바뀔때마다 바뀌도록 만들어주어야함.

변하는 부분을 우리가! 컨트롤하는 것! 

 

이벤트 리스너는 html이랑 똑같음 => 함수로 뺄 수 있다.^^

 

<div id="root"></div> <!-- 결과 : <div id="root"><button>Like></button> </div>-->
    <script type="text/babel">
        class GuGuDan extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    // 바뀌는 것들을 속성으로 추가해주기
                    first: Math.ceil(Math.random() * 9),
                    second: Math.ceil(Math.random() * 9),
                    value: '',
                    result: '',
                };
            }
			
            // class의 메소드 처럼 사용가능
            onSubmit = (e) => { // form 을 submit했을때 ~~
                e.preventDefault();
                // 입력한값과 실제 값이 같으면 ?! 정답 => 정답일때 화면이 어떻게 바뀔지
                if (parseInt(this.state.value) === this.state.first * this.state.second) {
                    this.setState({ 
                        result: '정답',
                        first: Math.ceil(Math.random() * 9),
                        second: Math.ceil(Math.random() * 9),
                        value: '',
                    });
                } else {
                    this.setState({ // 한번에 바꿔줄수 있음
                        result: '땡',
                        vlaue: '',
                    });
                }
            };

            onChange = (e) => this.setState({ value: e.target.value });

            render() {
                return ( // 소괄호는 취향차이(?)
                    // state 바꿀때 어떻게 했는지?
                    // input.onchange = (e) => { console.log(e.target.value)} // 얘를 이용하면 현재 뭘 입력하고 있는지 확인할 수 있음
                    // state는 setState처럼 직접 수동으로 바뀔얘들만 만들어줘라! 
                    <div>
                        <div>{this.state.first} 곱하기 {this.state.second}는?</div>
                        <form onSubmit={this.onSubmit}>
                            <input type="number" value={this.state.value} onChange = {this.onChange} />
                            <button>입력</button>
                        </form>
                        <div>{this.state.result}</div>
                    </div>
                );
            }
        }
    </script>
    <script type="text/babel"> 
        ReactDOM.render(<GuGuDan />, document.querySelector('#root')); 
    </script>

 

결과

 

이것이 구구단이라는 component를 만든것..!!

 

ReactDOM.render(<div><GuGuDan /><GuGuDan /><GuGuDan /></div>, document.querySelector('#root'));

위처럼 여러개를 사용할수있는데

 

위 세개가 같은 컴포넌트지만 다른 state를 가짐! 컴포넌트마다 별개로 동작함!!