[React] 게임으로 배우는 리액트 - Fragment, setState

---

render(){
    return (
        <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>
    );
}

앞선 포스팅의 구구단 게임 만들기에서 render부분입니다.

해당 코드에서 필요없는 div로 감싸져 있습니다.

이 div가 없으면 에러가 발생하는데요.

과거에는 리액트의 단점이라고 할수 있겠습니다.

해당 div가 있으면 css를 적용할때도 번거롭고 불편할수 있는데요.

이 부분이 보완되었습니다.

​

div 대신 React.Fragment를 작성해주면 됩니다.

불필요한 div영역은 사라지도 에러도 발생하지 않습니다.

​

---

​

onSubmit = (e) => {
    e.preventDefault();
    if(parseInt(this.state.value) === this.state.first * this.state.second){
        this.setState({
            result: '정답 : ' + this.state.value,
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9),
            value: '',
        });
    } else {
        this.setState({
            result: '떙',
            value: '',
        });
    }
};

해당 코드에서는 if문에서 result는 바뀌기 이전의 상태를 나머지는 바뀐 이후의 상태를 나타내주는 코드인데 이렇게 보시면 조금 헷갈리시죠??

​

prevState를 이용하면 이전 상태를 나타내줄수 있습니다.