Hooks
webpack 설정
name: 'wordrealy-setting',
mode: 'development', // 실서비스 : production
devtool: 'eval',
//옵션(관련된 확장자 찾아서 넣어주기)
resolve: {
extensions: ['.js', '.jsx']
},
//*
//입력
entry:{
app: ['./client'],
},
//entry에있는 파일에 module을 적용해서 아래의 설정들을 설정해서 output으로 출력하게 만든다.
module: {
//
rules: [{
test: /\.jsx?/,
loader: 'babel-loader',
options: {
//plugin들의 모임을 preset이라고 부른다
//원하는 브라우저에 맞춰서 사용하는 방법
// presets: ['@babel/preset-env', '@babel/preset-react'],
presets: [['@babel/preset-env', {
targets:{
browsers:['> 1% in KR'], //browserslist
//https://github.com/browserslist/browserslist/blob/main/README.md 참고
//'last 2 chrome versions'
},
debug: true,
}], '@babel/preset-react'],
},
}],
},
//확장 프로그램의 느낌
plugins:[
new webpack.LoaderOptionsPlugin({ debug: true }),
],
//출력
output:{
//현재 폴더 경로에 'dist'를 추가해준다.
// __dirname: 현재폴더
path: path.join(__dirname, 'dist',),
filename: 'app.js'
}함수형 컴포넌트
setState와 ref같은것을 사용하지 않을때에 함수형 컴포넌트를 사용할수있는데,
const GuGuDan = () =>{
return <div>Hello, Hooks</div>
}함수형 컴포넌트에서도 여기에서도 setState ref 기능을 추가해서 사용하는것을 Hooks로 사용할수있다.
- Hooks를 사용하지 않은경우
this.setState((prevState) => { //이전값 prevState을 가지고 새로운 State를 반환한다.
return {
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
result: '정답 : ' + prevState.value,
}
})- Hooks를 사용한경우(react에서 추천)
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 inputRef = React.useRef(null);
//Hooks에서 setstate를 아래와같이 사용할수도있다
setResult((prevResult) => {
return '정답 :' + value
})
//ref를 사용할때는 current를 붙여주기!
inputRef.current.focus();class -> className
for -> htmlFor
<button id="button" className="" htmlFor>입력</button>WebPack
npm init
npm i react react-dom : react, react dom install
npm install -D webpack : webpack 설치
npm i -D webpack-cli : webpack-cli 설치
-> npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D
-> npm i -D webpack-dev-server
- create-react-app을 수동으로 설정하는 방법
webpack.config.js - webpack 설정
- index.html
html에서는 app.js라는 파일하나만을 인식할수가있다
그래서 이럴때 webpack이 필요한것
<!DOCTYPE html>
<html lang="en">
<head>
<title>끝말잇기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>- webpack.config.js
module.exports = {
name: 'wordrealy-setting',
mode: 'development', // 실서비스 : production
};
npm i -D @babel/core
npm i @babel/preset-env
npm i @babel/preset-react
npm i babel-loader
webpack을 실행을 했을경우 webpack.config.js를 사용하여서 빌드하여 app.js를 만들게된다.
value와 onChange는 세트!
webpack devServer
- **변경이 됬는지 안됬는지 인식할수 있는 Option( 기존 데이터 유지하면서 Reloading을 하는지 안하는지!!!)
기존의 Reloading과 다른점이 무엇인가!?
devServer: {
//dist안에 되어있는것을 서버로 실행
publicPath: '/dist/',
//변경이 됬는지 안됬는지 인식할수 있는 Option( 기존 데이터 유지하면서 Reloading을 하는지 안하는지***)
hot: true,
//server의 포트 번호 설정
port: 3000
}
Let's do it developer