1. 클래스
지금은 많이 사용되지는 않지만 회사에 사용되고 있는 코드들이 있어서 공부
<html>
<head>
<meta charset="UTF-8"/>
<title>구구단</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.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 {
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: '',
};
});
this.input.focus();
} else {
this.setState({
result: '땡',
value: '',
});
this.input.focus();
}
};
onChange = (e) => {
this.setState({ value: e.target.value });
};
input;
//돔에 접근
onRefInput = (c) => { this.input = c; };
// 컨텐츠
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>2. Hooks
가장 많이 사용됨
<html>
<head>
<meta charset="UTF-8"/>
<title>구구단</title>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
'use strict';
const GuGuDan = () => {
// state, setState 각각 분리하고 초기값 지정
// GuGuDan 컨퍼런스 안에 무조건 넣어야 함
// state가 바뀌면 함수 전체가 실행되서 느려짐
//리액트에서 class = "" => classNmae = ""
// for = "" => htmlfot = ""
const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');
const inputEl = React.useRef(null); // 돔에 접근
const onSubmitForm = (e) => {
e.preventDefault();
if (parseInt(value) === first * second) {
setResult('정답');
setFirst(Math.ceil(Math.random() * 9));
setSecond(Math.ceil(Math.random() * 9));
setValue('');
inputEl.current.focus();
} else {
setResult('땡');
setValue('');
inputEl.current.focus();
}
};
//컨텐츠
return (
<React.Fragment>
<div>{first} 곱하기 {second}는?</div>
<form onSubmit={onSubmitForm}>
<input
ref={inputEl}
type="number"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<button>입력!</button>
</form>
<div id="result">{result}</div>
</React.Fragment>
);
};
</script>
<script type="text/babel">
ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
</script>
</body>
</html>'리액트' 카테고리의 다른 글
| [React] Elements (1) | 2023.01.05 |
|---|---|
| [React] JSX 알아가기 (2) | 2023.01.05 |
| [React] 리액트 시작하기 (1) | 2023.01.04 |
| [React] 리액트 기초 (1) | 2023.01.04 |
| [React 기초] 버튼 클릭 시 원하는 문자 출력 (4) | 2023.01.02 |