React는 사용하기 쉽고 효율적인 JavaScript UI 라이브러리입니다. Webpack은 모듈 번들러로써 프로젝트의 자원을 하나로 묶어주는 역할을 합니다. React를 프로젝트에 통합하고 관리하는데 Webpack을 함께 사용하면 코드의 구조와 성능을 개선할 수 있습니다.

Webpack 설치하기

먼저, Webpack을 설치해야 합니다. 다음 명령어를 사용하여 전역으로 Webpack을 설치합니다.

npm install -g webpack

React 프로젝트 생성하기

React 프로젝트를 생성하기 위해 Create React App을 사용할 수 있습니다. 아래 명령어를 실행하여 Create React App을 전역으로 설치합니다.

npm install -g create-react-app

다음으로, 원하는 디렉토리로 이동한 후 다음 명령어를 실행하여 새로운 React 프로젝트를 생성합니다.

create-react-app my-react-app

생성된 프로젝트로 이동합니다.

cd my-react-app

Webpack 설정하기

my-react-app 디렉토리로 이동한 후, webpack.config.js 파일을 생성하여 Webpack 설정을 할 수 있습니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

위의 설정은 src 디렉토리에 있는 index.js 파일을 진입점으로 설정하고, 번들된 파일은 dist 디렉토리에 bundle.js로 생성됩니다. 또한, Babel을 사용하여 JavaScript 파일을 트랜스파일링하여 브라우저에서 지원하는 코드로 변환합니다.

React 컴포넌트 작성하기

React 컴포넌트를 작성하기 위해 src 디렉토리에 App.js 파일을 생성합니다.

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, Webpack + React!</h1>
    </div>
  );
};

export default App;

Webpack과 React 통합하기

src 디렉토리에 있는 index.js 파일을 열고 다음과 같이 수정하여 Webpack과 React를 통합합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

빌드하기

모든 설정을 마친 후, 다음 명령어를 실행하여 프로젝트를 빌드합니다.

npm run build

빌드된 파일은 dist 디렉토리에 생성됩니다.

웹 애플리케이션 실행하기

dist 디렉토리에 생성된 index.html 파일을 웹 브라우저로 열어 React 애플리케이션을 실행할 수 있습니다.

마무리

이제, Webpack과 React를 함께 사용하는 방법을 알아보았습니다. Webpack을 사용하여 React 프로젝트를 구성하면 편리하고 효율적인 개발이 가능합니다. 자세한 내용은 Webpack 공식 문서와 React 공식 문서를 참고하시기 바랍니다.