[React] Webpack과 Babel 에 대해서 (JSX 없이 React 구현)

Jaka_Park 2024. 8. 26. 17:04

2024. 8. 26. 17:04

1. Webpack

2. JSX 없이 React 구현 (코드 설명)

1. Webpack

Webpack(웹팩)이란 모듈 번들러라고 할 수 있다. 모듈 번들러라는 것은 "여러 개로 나누어져 있는 파일들을 하나의 파일로 묶어준다."는 개념이다. 그럼 이 webpack(모듈 번들러)이 왜 필요한것일까?

- webpack(모듈 번들러)이 필요한 이유

위에서 webpack이 파일들을 합쳐준다는 것을 명시했다. 이것을 왜 사용할까?

1. 하나의 파일만 받으면 되기 떄문에 반응속도가 빨라질 수 있다.

2. 모듈 단위의 코딩이 가능하여 가독성 및 유지보수에 용이하다.

3. ES6 버전 이상의 스크립트를 사용할 수 있다. (Webpack의 Babel-loader 사용시 ES5 문법으로 바꿔주기 때문에 브라우저가 호환이 가능하다.)

Webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  name: 'myapp',
  mode: 'development',
  devtool: 'inline-source-map',
  entry: path.resolve('src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html'
  })]
}

Entry : 번들화에 필요한 진입점

Output

- path : 번들화 후 보낼 파일 경로 설정

- filename : 번들화 할 파일 이름 설정

Plugins : 사용할 플러그인

ex) html-webpack-plugin : HTML 파일을 자동으로 생성해주는 Webpack 플러그인

(template : 웹팩이 사용할 HTML 템플리 파일의 경로 / filename : 지정한 이름으로 파일 생성)

- Webpack으로 번들화를 하게되면 index.html 아래와 같이 나온다

(원래의 index.js는 bundle.js를 사용하지 않지만 웹팩을 거치고 script영역과 같이 bundle.js 사용할수 있게 생긴다.)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script defer src="bundle.js"></script></head>
<body>
  <div id="root"></div>
</body>
</html>

2. JSX 없이 React 구현 (ES6 문법)

import React from 'react';
import ReactDOM from 'react-dom';

const e = React.createElement;

class App extends React.Component {
  render(){
    return e(
      'button',
      {
        id: 'f',
        onClick: () => this.setState({ liked: true })
      },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#root');
const root = ReactDOM.createRoot(domContainer);

root.render(e(App));

위의 코드는 React의 가상DOM을 간단하게 만들어 보는 예제다

React.createElement(dom스타일, props, 자식요소) 를 매개변수로 하는 React에서 제공하는 함수.

여기서 잠깐
Props(Properties : 속성)
부모 요소가 자식 컴포넌트에게 전달하는 속성(데이터)라고 생각하면 편하다. React는 컴포넌트라는 것을 사용하는데 컴포넌트는 HTML태그 처럼 사용하는 일종의 '함수'이다. 즉 React는 함수 안에 함수가 있는 형태를 띄고 있는데 이러한 특성 때문에 React의 데이터 전달은 단방향으로 흘러가는 형태를 가지고 있다.

App은 React.Component 를 상속받아서 render라는 함수를 호출하며 return 값으로 DOM을 그려준다.

위와 같은 코드는 ES6 문법인데 가독성이 떨어지고 알아보기 어렵다.

그래서 사용하는 것이 JSX 문법이다. 브라우저에서 호환이 되지 않기 ES6 문법에서
ES5로 바꿔주는 과정이 필요하다. 그러기 위해 바벨이 필요하다.
이런 이유로 React에서 Webpack(웹팩)과 Babel(바벨)은 뗄레야 뗄 수 없는 관계다.

'React' 카테고리의 다른 글

[React] Link 컴포넌트 (1)	2024.09.20
[React] class 컴포넌트와 state의 변화 (1)	2024.08.30
[React] CRA (Create React App) 간단히 알아보기 (0)	2024.08.30
[React] React 바닐라 JS로 구현해보기 (0)	2024.08.26
[React] 리액트 첫 시작 (0)	2024.08.24

Will find a way