이전에는 class로 작성하였는데
함수 컴포넌트로 작성하기
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 [sum, setSum] = React.useState(0);
const inputRef = React.useRef(null);
함수 컴포넌트 안에서 ref와 useState를 사용할 수 있게 해준게 react hooks
구조분해 => 변수자리에 배열이나 객체를 넣은 형태
react에서는 class를 선언해줄때 class="name" 으로 선언하지 못한다.
class GuGuDan extends React.Component {
해당부분에서 사용되는 class와 혼동될 가능성이 있기 때문
<div className="sum">맞춘문제 : {sum}</div>
class를 선언할 땐 className으로 선언한다.
같은 원리로 라벨부분에서 사용하는 for="name"도 사용이 불가능하다
<label htmlFor=""></label>
사용하기위해서 htmlFor="name"으로 사용
<html>
<head>
<meta charset="utf-8">
<title>web game</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const GuGuDan = () => {
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 [sum, setSum] = React.useState(0);
const inputRef = React.useRef(null);
const onChangeInput = (e) => {
setValue(e.target.value);
};
const onSubmitForm = (e) => {
e.preventDefault();
if (parseInt(value) === first * second) {
setResult(`정답(${first} x ${second} = ${value})`);
setFirst(Math.ceil(Math.random() * 9));
setSecond(Math.ceil(Math.random() * 9));
setValue('');
setSum(sum+1);
inputRef.currunt.focus();
} else {
setResult('오답');
setValue('');
inputRef.currunt.focus();
};
}
return (
<React.Fragment>
<div>{first} 곱하기 {second} 는?</div>
<form onSubmit={onSubmitForm}>
<input ref={inputRef} onChange={onChangeInput} value={value} />
<button>입력</button>
</form>
<div id="result">{result}</div>
<div className="sum">맞춘문제 : {sum}</div>
</React.Fragment>
)
}
</script>
<script type="text/babel">
ReactDOM.createRoot(document.querySelector('#root')).render(<GuGuDan />); // react 18버전 코드
</script>
</body>
</html>
전체코드 ( React Hooks 사용 )
Webpack
웹팩 은 노드기반
node.js -> 자바스크립트 실행기
프로젝트에 폴더 생성하고
npm init
그러면 package.json생성이 된다.
npm i react react-dom
react 와 react-dom 을 설치해준다.
npm i -D webpack webpack-cli
webpack과 webpack-cli 를 설치해준다.
-D 는 개발용으로만 사용하겠다 라고 알려주는것.
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
}
package.json에서 전체에 사용되는건 dependencies에 있고
개발에만 사용되는건 devDependencies에 있다.
lecture 폴더에 webpack.config.js 생성하기
const React = require('react');
const ReactDom = require('react-dom');
lecture 폴더에 client.jsx 생성하기
npm을 통해 설치해준걸 불러오는 역할을 한다.
해당코드를 작성하면 문서에서 script를 통해서 불러올 필요가 없어진다.
js 와 jsx의 차이점은 react를 사용해서 jsx 문법을 사용하면 해당 확장자를 사용해서 명시해주는것
const React = require('react');
const ReactDom = require('react-dom');
class WordRelay extends React.Component {
state = {
}
render() {
}
}
ReactDom.render(<WordRelay />, document.querySelector('#root'));
client.jsx에서 작업된 파일을 재사용성을 위해 클래스 하나를 파일로 생성해준다
const React = require('react');
const { Component } = React;
class WordRelay extends Component {
state = {
}
render() {
}
}
module.exports = WordRelay;
WordRelay.jsx 파일생성
const { Component } = React; 를 통해서 react명시를 따로 하지않아도 동작한다.
파일을 쪼갤경우에 위에서 import 하고 아래에서 export 해줘야한다.
const WordRelay = require('./WordRelay');
export한 WordRelay.jsx 파일을 client.jsx 파일에서 가져와서 사용할 수 있다.
html 에서는 script src를 통해서 하나의 파일만 불러올 수 있어서 파일을 여러개 가져오기 위해 웹팩을 사용
