구구단 Hooks로 만들기
<html>
<head>
<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">
//함수 컴포넌트, 함수에서도 state와 ref를 사용하게 해주었음 -> Hooks
// state가 변경될때마다 gugudan이 다시실행되기때문에 느릴 수 있다.
// react는 태그안에 class를 사용할 수 없다 그래서 className을 사용한다.
// label에 For 속성 또한 label에서 htmlFor라고 사용한다.
const GuGuDan = () => {
// 항상 GuGuDan안에 들어와있어야한다.
const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
// setFirst는 first 전용 setState이다.
const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');
const inputRef = React.useRef(null);
const onChangeInput = (e) => {
setValue(e.target.value);
};
const onSubmitForm = (e) => {
e.preventDefault();
if (parseInt(value) === first * second) {
setResult('정답: ' + value);
// 예전 상태를 사용하려면 함수형으로 써주면 된다.
// setResult((prevResult) =>{
// return '정답: ' + value
// })
setFirst(Math.ceil(Math.random() * 9));
setSecond(Math.ceil(Math.random() * 9));
setValue('');
// setState들이 비동기라서 한번에 React에서 알아서 렌더링 해준다.
inputRef.current.focus();
} else {
setResult('떙');
setValue('');
inputRef.current.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>
</React.Fragment>
}
</script>
<script type="text/babel">
ReactDOM.render(<GuGuDan />, document.querySelector('#root')); //화면에다가 위에서 만든 것을 실제로 반영하겠다. 렌더링 하겠다.
</script>
</body>
</html>
WebPack사용하기
페이스북 컴포넌트 2만개...
수많은 컴포넌트를 만드는데에 script태그를 반복해서 쓰게되면 유지보수가 되지않는다.
그래서 나온게 Webpack , 쪼개진 자바스크립트 파일들을 하나의 파일로 합쳐준다.
리액트 하려면 노드를 해야한다?
node(자바스크립트 실행기)를 알아야한다가 서버를 알아야한다가 아니라
리액트를 webpack을 돌리기위한 자바스크립트를 실행해야한다.
create react app 으로 만들어도 상관없으나, 이해를 잘 할 수 없다.
.jsx 로 만드는 이유?
- jsx문법을 사용하는구나-> 리액트를 사용하구나 를 알 수 있기 때문에 (개발자들이)
webpack 커멘드 명령을 이해하지 못할때
1) package json에서 script안에 수정한다.
2) npx webpack
babel core : 바벨의 기본적인 것들
babel preset-env : 개발자 브라우저에 맞게 최신문법을 예전문법으로 바꿔줌
babel preset-react : jsx 지원
babel loader : babel이랑 webpack을 연결해줌
entry module output
입력받아서 모듈안에 있는 rule을 적용해서 출력한다.
// webpack.config.js
const path = require('path'); // node에서 경로 쉽게 조작하기 위함임 , 그냥 외우자!
module.exports = {
name: 'word-relay-setting', // 크게 필요는 없지만 알아보기 위한 정도
mode: 'development', // 실서비스에서는 production 으로 바꾼다.
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx'], // webpack이 알아서 확장자를 찾는다
},
// 제일 중요한 부분
// 입력
entry: {
app: ['./client'], // client.jsx가 wordRelay를 불러오기때문에 써줄 필요가 없다. 확장자도 생략가능! 대신 resolve써줘야함 위처럼
},
module: {
rules: [{
test: /\.jsx?/, // 정규표현식 js파일과 jsx파일을 룰을 적용하겠다.
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
}
}],
},
// 출력
output: {
path: path.join(__dirname, 'dist'), // 현재폴더에 안에 들어있는 dist라는 폴더가 된다.
// c:desktop/개발자....어디어디 이런거 안치게 해줌
filename: 'app.js'
},
}
// wordrelay.jsx
const React = require('react'); // 쪼갠파일에서 필요한 패키지나 라이브러리 가져오는 부분
const { Component } = React;
class WordRelay extends Component {
state = {
text: 'Hello, webpack',
};
render() {
return <div>{this.state.text}</div>
}
}
module.exports = WordRelay; // 쪼갠 파일을 밖에서도 사용하게 해줌.반응형
'패스트캠퍼스 > 자습' 카테고리의 다른 글
| poiemaweb 8~9강 복습 (0) | 2019.09.10 |
|---|---|
| 리액트 16~20강 정리 (0) | 2019.09.09 |
| poiemaweb 6~7강 정리 (0) | 2019.09.07 |
| 리액트 예습 6~10강 (0) | 2019.09.05 |
| poiemaweb 4~5강 정리 (0) | 2019.09.05 |