# 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** 를 사용해보겠습니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://haleyryu.gitbook.io/engineer/frontend/react-x-redux/2.-react-reactdom.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.