<React.Fragment> </React.Fragment>
=> class를 render의 return을할 때 <div>로 묶어주는 경우가 생기는데 이 <div>는 의미없는 태그로
<React.Fragment>를 사용하면 불필요한 태그를 사용하지 않아도 됨
e.preventDefault()
=> <a>태그, <submit>태그와 같은 동작을 중단 시킴
prevState
=> 이전 상태 값을 가지고 있음
input;
<input ref={(c) => {this.input = c; }}/>
this.input.focus();
=> input으로 focus전환
class의 render부분에 함수를 바깥으로 두지 않으면 렌더링이 발생할 때 해당 부분들도 재실행되므로
최적화를 위해서 바깥에 두는것이 좋음
<html>
<head>
<meta charset="UTF-8" />
<title>구구단</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></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: "",
};
}
onSubmit = (e) => {
e.preventDefault();
if (
parseInt(this.state.value) ===
this.state.first * this.state.second
) {
this.setState((prevState) => {
return {
result: prevState.value + " 정답!",
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: "",
};
});
} else {
this.setState((prevState) => {
return {
result: "땡",
value: "",
};
});
}
this.input.focus();
};
onChange = (e) => {
// input 입력
this.setState({ value: e.target.value });
};
onRefInput = (c) => {
this.input = c;
};
input;
render() {
return (
<React.Fragment>
<div>
{this.state.first}곱하기{this.state.second}는?
</div>
<form onSubmit={this.onSubmit}>
<input
ref={this.onRefInput}
type="number"
value={this.state.value}
onChange={this.onChange}
/>
<button>입력!</button>
</form>
<div>{this.state.result}</div>
</React.Fragment>
);
}
}
</script>
<script type="text/babel">
ReactDOM.render(<GuGuDan />, document.querySelector("#root"));
</script>
</body>
</html>
해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을 정리한 글입니다.
'React' 카테고리의 다른 글
| [React] 웹팩(webpack) (0) | 2020.11.05 |
|---|---|
| [React] Hooks, 코드 비교 (0) | 2020.11.05 |
| [React] state 변경, babel로 jsx코드 실행 (0) | 2020.11.04 |
| [React] html에서 react Component 생성 (0) | 2020.11.03 |
| [React] 리액트란? (0) | 2020.11.03 |