2. React 와 ReactDOM 적용하기
2. React 와 ReactDOM 적용하기
React의 DOM 렌더링 과정은 이 문서를 참고하여 공부했습니다. 이와 관련해서 이후 포스팅을 할 예정입니다.
React, ReactDOM 설치하기
$ npm install --save react react-dom
/index.js 에서 사용해보기
import React from "react";
import ReactDOM from "react-dom";
let Hi = () => {
return <h1>Hi Ryu!</h1>
};
ReactDOM.render(
<Hi/>,
document.getElementById("root")
);
이제 React 코드를 어떻게 컴파일해야할지 Webpack 에게 알려주는 역할이 필요합니다.
Babel 이 바로 그 역할을 합니다.
Babel packages 설치하기
$ npm install --save-dev @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader
더불어, 앞으로 css 파일들을 사용하여 스타일을 줄수 있도록 style 관련 loader 와 File 관련 loader 를 추가로 설치해주었습니다.
$ npm install --save-dev style-loader css-loader sass-loader node-sass$ npm install --save-dev file-loader @babel/plugin-proposal-class-properties
이제 Babel 의 설정파일을 추가하여 Webpack이 React와 스타일 관련 코드들을 컴파일할 수 있도록 해야합니다.
Babel Config 작성하기
$ vi .babelrc
/.babelrc 에 아래와 같이 작성합니다.
{
"presets": [
"@babel/env",
"@babel/react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
Webpack.config.js 의 module.rules 에 loader 정보 추가해주기
config.module = {
rules: [
{
// this is so that we can compile any React,
// ES6 and above into normal ES5 syntax
test: /\.(js|jsx)$/,
// we do not want anything from node_modules to be compiled
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(css|scss)$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
loaders: ['file-loader']
}
]
};
package.json scripts 수정하기
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "babel-node ./node_modules/webpack/bin/webpack --mode development",
"build": "babel-node ./node_modules/webpack/bin/webpack --mode production",
"dev": "babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --open --mode development"
},
이제 모든 설정이 끝났습니다!
CSS 파일을 하나 만들어서 스타일이 잘 적용되는지 확인해봅시다!
src 폴더 하위에 style.css 파일을 하나 생성하고 body #root {font-size: 50px} 와 같이 간단한 스타일을 선언해줍니다.
그 다음, index.js 에서 이를 import 한뒤 (import "./style.css" ) - 서버를 띄웁니다.
$ npm run dev
그럼 아래와 같이 스타일이 적용된 것을 확인할 수 있습니다.
짝짝짝! 👏🏻👏🏻
이제 기본적인 셋팅은 끝이 났습니다.
다음으로는 Redux 를 사용해보겠습니다.
Last updated
Was this helpful?