section0. 9-Fragment와 기타 팁들

Fragment

React에서 화면을 최종적으로 반환할 때는 딱 하나의 태그만 반환해야한다. (부모 태그가 1개여야한다는 것)

그래서 쓸데없는 <div></div> 로 감싸줘야하는데 이것이 css를 적용할 때 방해가 될 때가 많다.

 

그럴 때 사용하는 것이 빈 껍데기 태그인 <></> Fragment를 사용하는 것이 좋다. 

(이것이 에러나면 <React.Fragment></ React.Fragment>로 감싸주면 된다.)

return (
	<React.Fragment>
    	~
	</React.Fragment>
);

 

클래스 컴포넌트에서 주의점

함수 메서드를 따로 만들어서 이벤트 리스너와 연결시킬 때는 화살표 함수를 사용해라. function을 사용하면 this가 달라져서 작동하지 않는다. 

실무에서는 constructor를 사용하지않고 바로 state= {..} 이렇게 선언한다.

class GuGuDan extends React.Component{
            state = {
                first: Math.ceil(Math.random() * 9),
                second: Math.ceil(Math.random() * 9),
                value:'',
                result : '',
            }

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

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

            render() {
                return (
                    <React.Fragment>
                        <div>{this.state.first} 곱하기 {this.state.second}는?</div>
                        <form onSubmit={this.onSubmit}>
                            <input type="number" value={this.state.value} onChange={this.onChangeInput}/>
                            <button>입력!</button>
                        </form>
                        <div>{this.state.result}</div>
                    </React.Fragment>
                );
            }
        }