react로 구구단을 만들어본다.
React, ReactDOM, Babel은 cdn으로 사용
1. 기본 구조 작성
<html>
<head>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class GuGuDan extends React.Component {
constructor(props) {
super(props)
}
render () {
return ;
}
}
</script>
<script type="text/babel">
ReactDOM.render(<GuGuDan />, document.querySelector('#root'));
</script>
</body>
</html>- GuGudan class 기본 틀을 만들고, GuGuDan을 렌더링하는 구조로 제작.
2. state 초기값 설정
this.state로 상태값의 default값을 설정해준다.
대상은 1)곱하는 숫자 앞 2)곱하는 숫자 뒤 3)input창 4)결과값
this.state = { //위치는 constructor(props)의 바로 아래
first : Math.ceil(Math.random() * 9), //첫번째 숫자
second : Math.ceil(Math.random() * 9), // 두번째 숫자
value : '', // input창
result : '', // 결과값
};3. 렌더링 설정
초기값을 설정한 state와 고정 내용을 render 함수 내에 배치함.
render () {
return (
<div>
<div>{this.state.first} 곱하기 {this.state.second}는?</div>
<form>
<input type="number" value={this.state.value} />
<button>입력</button>
</form>
<div>{this.state.result}</div>
</div>
);
}중요한 점
지금 상태론 input창에 value값을 아무리 입력해도 값이 입력되지 않을 거임.
어떻게 하면 되냐?
onChange 이벤트를 할당하면 됨.
<input type="number" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })}/>이렇게 하면 인풋창에 입력값이 실시간으로 보이게 된다.
입력값을 하나의 state로 정의해서 사용하는 방식인데 이렇게 할 경우
입력받는 값을 state로써 활용할 수 있고 그렇기 때문에 에러도 덜 발생한다.
4. 구구단 로직 + 마무리
구구단이 실제로 작동하려면 숫자(value)를 받아서 곱해야 한다.
이 로직을 구현해보자.
알아둘 점
react에서 사용하는 onclick, onfocus, onchange, onsubmit, onload, oninput, onblur 등은 다 기본 js handler임!!
중요한 점
JSX와 JS를 혼동해서 사용하지 말 것. 이벤트 로직(js)은 따로 구현하고 렌더링 시 태그에 이벤트를 부여(JSX)할 것!!
wishing is not enough, we must do.