Babel
- 최신/실험적인 문법을 사용할 수 있게 해줌
- ES2015+ 문법을 사용한 코드를 예전 ES5 자바스크립트 코드로 바꿔주는 도구
JSX
- JS + XML
setState
- 비동기 함수
- 예전 값으로 새로운 값을 만들 때는 setState의 인자로 함수를 사용하기
Hooks
- 함수에서도 setState나 ref를 사용할 수 있도록 한 것이 Hooks
- const [value, setValue] = React.useState();
- const ref = React.useRef();
Webpack
- 여러 개의 js파일을 한번에 합쳐서 하나의 js파일로 만들어줌
Node
- js 실행기
개발 설정
- 폴더를 하나 선택
- npm init
: 완료되면 package.json이 생성됨
- npm i react react-dom
: 리액트 개발에 필요한 것완료되면 package
- npm i -D webpack webpack-cli
(-D는 개발용으로 사용할 때. package.json에 devDependencies에 추가됨)
- npm i -D @babel/core
기본적인 babel 최신문법 바꿔줌
- npm i -D @babel/preset-env
최신문법을 브라우저에 맞는 문법으로 변환해줌
- npm i -D @babel/preset-react
jsx 지원
- npm i -D babel-loader
babel과 webpack을 연결해줌
- npm i -D @babel/plugin-proposal-class-properties
@babel/plugin-proposal-class-properties class의 state={} 문법을 사용하려면 추가
- webpack.config.js 파일 추가하고 아래 작성
const path = require('path');
module.exports = {
name: 'react-project',
mode: 'development', // 실서비스: production
devtool: 'eval', // 빠르게 하겠다
resolve: {
extensions: ['.js', '.jsx'] // webpack이 js나 jsx를 찾아서 output의 filename(app.js)으로 만들어줌
},
entry: { // 중요
app: ['./index'] // app.js이라는 이름이 여기서 정해짐
}, // 입력
module: {
rules: [{ // 여러개의 규칙을 적용
test: /\.(js|jsx)$/i, // 뒤에 .js나 .jsx가 대소문자 구분해서 붙어 있는지 확인
loader: 'babel-loader', // babel을 적용해서 이전 브라우저에서도 최신문법을 적용할 수 있게 해줌
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'] // jsx파일에서 state = {} 사용시 필요
}
}]
},
output: { // 중요
path: path.join(__dirname, 'dist'), // output으로 나올 파일이 저장될 경로, C:\..\프로젝트폴더\dist를 자동으로 만들어줌
filename: 'app.js',
}, // 출력
};
- index.html 파일에 기본설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js">
</script>
</body>
</html>
- client.jsx 파일 추가하고 아래 작성
const React = require('react');
const ReactDom = require('react-dom');
const 쪼갤클래스나함수이름 = require('파일경로');
ReactDom.render(<쪼갤클래스나함수이름 />, document.querySelectors('#root'));
파일 쪼개기
- 개발설정에서 추가한 client.jsx 파일에서 class나 함수를 계속 추가하면 관리에 어려움이 있으니 파일을 쪼개보자
- 쪼갤클래스나함수이름.jsx
const React = require('react');
const { Component } = React; // 쪼갠 파일에서 필요한 package나 library를 가져오는 부분
class 쪼갤클래스나함수이름 extends Component {
state = {
}
render() {
}
}
module.exports = 쪼갤클래스나함수이름; // 쪼갠 파일을 다른 곳에서도 사용할 수 있게 해주는 node의 모듈시스템
이탤릭채로 된 부분을 추가해주어야 함'프로그래밍 > React' 카테고리의 다른 글
| [React] Editor 선정하기 (0) | 2021.08.22 |
|---|---|
| [React] Webpack CSS 설정 추가하기 (0) | 2020.12.20 |
| [React] immutable Failed to compile (0) | 2020.11.18 |
| [React] 기초 정리 (0) | 2020.02.22 |
| [React] Webpack 자동 빌드 (0) | 2019.11.27 |
댓글