리액트 -2

강의자료: 웹 게임을 만들며 배우는 React

React Hooks 사용하기

리액트에서 class보다 hooks를 권유함 (함수형태)
코드가 훨씬 짧아짐.
state를 객체로 묶지 않고 분리하고 함수에 초기값을 설정

class와 hooks 비교하기

state가 변경되면 함수가 다시 실행됨
class -> classname으로
for -> htmlfor

웹팩 설치하기

스크립트가 많아지면 유지보수가 힘들어짐 그래서 웹팩이 만들어짐
jsx 파일로 만들어주면 리액트 전용으로 만들어진 것이라고 알릴수 있음
package.json에 패키지들을 넣어주면 된다.

모듈 시스템과 웹팩 설정

class를 다른 파일에서 불러와서 사용
분리할 때 꼭 필요한 코드
📝 WordRelay.jsx

//리액트 가져오기
const React = require('react');
const { Component } = require('react');

// 모듈을 밖에서도 쓸 수 있게 해주는 코드
module.exports = WordRelay;

📝Client.jsx

//npm에 설치한 react 불러오기
const React = require('react');
const ReactDom = require('react-dom');
//WordRelay 모듈 불러오기
const WordRelay = require('./WordRelay');

ReactDom.render(<WordRelay />, document.querySelector('#root'));

html에는 하나의 코드만 불러올 수 있으니까 ./dist/app.js 파일에 다 들어가야함.

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>끝말잇기</title>
    </head>

    <body>
        <div id="root"></div>
        <script src="./dist/app.js"></script>
    </body>
</html>

웹팩은 webpack.config.js로 다 돌아감

const path = require('path'); //경로 조작하기 위한 

module.exports = {
    name: 'wordrelay-setting',
    mode: 'development', // 실서비스할려면 production
    devtool: 'eval', //빠르게
    resolve: {
        extensions: ['.js','jsx']
    }, //entry에서 확장자 달기 귀찮을 때 쓰는 방법 
  
    entry: {
        app: ['./client.jsx','WordRelay.jsx'], 
    },//입력

    output: {
        path: path.join(__dirname, 'dist'), //dirname은 현재폴더이니까 경로를 쉽고빠르게 조작 가능
        filename: 'app.js'
    },//출력
};

웹팩에서 client.jsx를 불러오면 client.jsx에서 WordRelay.jsx를 불러오니까 webpack에서 client.jsx를 불러오면 알아서 둘 다 불러와짐
명령어 설정이 안되어있어서 설정해줘야함

package.json 에서 설정

"scripts": {
    "dev": "webpack"
  },

그리고 `npm run dev webpack` 터미널에 적어줌

명령어로 실행
터미널에 npx webpack 쓰기

webpack이 실행되면 dist 폴더에 app.js 파일 생성

웹팩으로 빌드하기

babel설치
module 설정
: entry에 파일을 불러와서 모듈을 적용한 후 output에 빼기 위해

💖웹팩 만들기 정리 (구구단 문제를 웹팩으로)

해당 폴더에서 npm init,
name은 폴더명같게
나머지 다 넘기고
author에 이름,
license에 MIT,
yes
npm i react react-dom 설치
npm i -D webpack webpack-cli 설치
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
폴더에 newfile webpack.config.js 만들고

const path = require('path');

module.exports = {
    mode: 'development',
    devtool: 'eval',//hidden-source-map
    resolve: {
        extensions: ['.jsx','.js'],
    },

    entry: {
        app: './client',
    },

    module:{
        rules: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            options:{
                presets:['@babel/preset-env','@babel/preset-react'],
                plugins:[],
            },
        }],
    },

    output:{
        filename: 'app.js',
        path: path.join(__dirname, 'dist'),
    },
};

package.json 파일에 "dev": "webpack" 추가
newfile생성 : client.jsx, GuGudan.jsx 생성
📝 GuGudan.jsx

const React = require('react');
const { useState, useRef } = React;

....//코드 넣기

module.exports = GuGudan;

📝client.jsx

const React = require('react');
const ReactDom = require('react-dom');

const GuGudan = require('./GuGudan');

ReactDom.render(<GuGudan />, document.querySelector('#root'));

터미널 npx webpack 입력 후 오류같은거 수정하고 성공하기
dist 파일에 app.js가 생성되었는지 확인
index.html 파일 생성 후 코드입력하고 확인

<html>
    <head>
        <meta charset="UTF-8">
        <title>구구단</title>
    </head>

    <body>
        <div id="root"></div>
        <script src="./dist/app.js"></script>
    </body>
</html>

@babel/preset-env와 plugins

plugin들의 모음이 preset
@babel/preset-env에 설정을 하고 싶다면
presets에 preset을 병렬로 정리한 후 중괄호를 열어 안에 설정을 넣어줌

presets:
  [['@babel/preset-env', {
  	targets: {
    	browsers: ['list 2 chrome versions'],
  	},
  }],
  '@babel/preset-react',
],

🔗브라우저스 리스트 주소
사이트 들어가서 추가 옵션 적용해 보기

브라우저 지원 옵션을 설정할 수 있음
module안에 플러그인 말고도 다른 plugins를 설정할 수 있음
- 엄청 많음....

plugins :[
	new webpack.LoaderOptionsPlugins({debug: true}),
],

위에서 const webpack = require('webpack'); 불러와야함

끝말잇기

value와 onChange는 세트, 그게아니면 defaultValue
코드 써보면서 중요한 것
- 내가 만든 함수는 = () => {}로 표기
- ;세미콜론 꼭 넣기

웹팩 데브 서버와 핫 리로딩

핫 리로딩 하기위해서 npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D 터미널에 입력
서버도 필요함 npm i -D webpack-dev-server 깔기
package.json에서 "dev": "webpack serve --env development",로 변경
4.webpack.config.js 파일에
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); 입력
module부분에도 rules에 babel-loader options에서 plugins:['react-refresh/bable',] 추가
전체 plugins에 plugins:[new RefreshWebpackPlugin()], 추가

devSever: {
	devMiddleware: { publicPath:'/dist/'},
    static: {directory: path.resolve(__dirname)},
    hot:true
}

추가

hooks로 전환

hooks로 전환하면 this 안씀
const { useState, useRef } = React; 로 바꿔주기

21.10.28 끝👶
자바 공부 좀 해야겠다,,

Author And Source

이 문제에 관하여(리액트 -2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wxxxn1/리액트-2

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)