> For the complete documentation index, see [llms.txt](https://haleyryu.gitbook.io/engineer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://haleyryu.gitbook.io/engineer/frontend/react-x-redux/2.-react-reactdom.md).

# 2. React 와 ReactDOM 적용하기

## 2. React 와 ReactDOM 적용하기

React의 DOM 렌더링 과정은 [이 문서를](https://d2.naver.com/helloworld/9297403) 참고하여 공부했습니다. 이와 관련해서 이후 포스팅을 할 예정입니다.

**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
```

그럼 아래와 같이 스타일이 적용된 것을 확인할 수 있습니다.

![](http://cfile22.uf.tistory.com/image/995301485C7B4669235565)

### 짝짝짝! 👏🏻👏🏻&#x20;

이제 기본적인 셋팅은 끝이 났습니다.&#x20;

다음으로는 **Redux** 를 사용해보겠습니다.