[React] 1-6 구구단 리액트로 만들기(1)

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

 

이번 강의에서부터 state가 무엇인지를 파악하는걸 중요하게 다루셨다.

 

구구단에서 바뀌는 , 바뀔수있는 여지가 있는 부분은 4가지 

랜덤으로 바뀌는 숫자부분(2) , 인풋에 담기는 값, 결과 값 

 

해당부분은 component로 만들어둔 GuGuDan class의 생성자의 상태로 지정해준다.

 

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: '',
                }
            }
           ...

 

그런다음 태그를 그려주는 render에 아래와같이 입력해준다. 

render() {
    return ( // 소괄호는 취향차이(?)
        // state 바꿀때 어떻게 했는지? = setState!!
        <div>
            <div>{this.state.first} 곱하기 {this.state.second}는?</div>
            <form>
                <input type="number" value={this.state.value} 
                  onChange={(e) => this.setState({value : e.target.value})}/>
                // input.onchange = (e) => { console.log(e.target.value)} 
                // 얘를 이용하면 현재 뭘 입력하고 있는지 확인할 수 있음
                <button>입력</button>
            </form>
            <div>{this.state.result}</div>
        </div>
    );
}

 

<input type="number" value={this.state.value} />

 

처음에 위처럼 입력하면 인풋안에 입력이 되지 않는다. 

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

위 부분을 추가하면 입력이 가능하다.  state를 바꿔주기위해 setState를 사용해서 바꿔주는 것.

input.onchange = (e) => { console.log(e.target.value)}