최소 구성으로 시작 @ionic/react

17275 단어 webpack React ionic

소개

올해 초 Ionic 4가 출시되었습니다.
Ionic 4에서는 UI 컴포넌트가 WebComponents에서 다시 구현되어 React와 Vue에서도 Ionic을 사용할 수 있습니다.
그래서 React 버전의 @ionic/react을 빠르게 실행하고 싶습니다.
(버전 4.8.0-rc.0에서 동작 확인했습니다.)

@ionic/react를 사용하려면 Webpack에서 몇 가지 설정이 필요합니다.
Ionic CLI나 create-react-app를 이용하면 이들이 설정된 상태에서 @ionic/react를 이용할 수 있습니다.
(둘 다 내부적으로 react-scripts를 사용합니다.)

그러나 이러한 환경에서는 불필요한 패키지도 많이 도입되어 버릴 것입니다.
빌드 환경을 스스로 커스터마이즈하고 싶은 사람이나, 기존의 React 앱에 Ionic을 짜넣고 싶은 사람을 위해서, 최소 구성으로 @ionic/react가 움직이는 환경을 만들어 봅니다.

패키지 설치

다음과 같이 패키지를 초기화하고 필요한 패키지를 설치합니다.

$ npm init -y
$ npm i @ionic/react react react-dom react-router@4 react-router-dom@4
$ npm i -D @babel/core @babel/preset-react @svgr/webpack babel-loader css-loader style-loader url-loader webpack webpack-cli webpack-dev-server

Webpack 설정

다음과 같이 webpack.config.js를 작성합니다.

webpack.config.js

const path = require('path')

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        },
        include: [
          path.resolve(__dirname, 'src')
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          }
        ]
      },
      {
        test: /\.svg$/,
        use: [
          '@svgr/webpack',
          'url-loader'
        ]
      }
    ]
  },
  entry: {
    bundle: './src/index'
  },
  output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js'
  },
  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, 'public')
  },
  mode: process.env.NODE_ENV || 'development'
}

앱 구현

이런 식으로 앱을 구현합니다.
설명을 단순화하기 위해 하나의 파일 만 간단한 것입니다.
React에 익숙한 사람이라면 일반 구성 요소 라이브러리로 사용할 수 있습니다.

src/index.js

import '@ionic/core/css/core.css'
import '@ionic/core/css/ionic.bundle.css'

import React from 'react'
import { render } from 'react-dom'
import {
  BrowserRouter as Router,
  Route,
  Switch
} from 'react-router-dom'
import {
  IonApp,
  IonContent,
  IonFab,
  IonFabButton,
  IonHeader,
  IonIcon,
  IonItem,
  IonList,
  IonTitle,
  IonToolbar
} from '@ionic/react'
import { add } from 'ionicons/icons'

const MainPage = () => {
  const [items, setItems] = React.useState(['A', 'B', 'C'])

  return <>
    <IonContent>
      <IonList>
        {
          items.map((item, i) => {
            return <IonItem key={i}>{item}</IonItem>
          })
        }
      </IonList>
    </IonContent>
    <IonFab vertical='bottom' horizontal='end' slot='fixed'>
      <IonFabButton
        onClick={() => {
          const newItems = Array.from(items)
          newItems.push('new item')
          setItems(newItems)
        }}
      >
        <IonIcon icon={add} />
      </IonFabButton>
    </IonFab>
  </>
}

const App = () => {
  return <Router>
    <IonApp>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Hello @ionic/react</IonTitle>
        </IonToolbar>
      </IonHeader>
      <Switch>
        <Route path='/' component={MainPage} />
      </Switch>
    </IonApp>
  </Router>
}

render(<App />, document.getElementById('content'))

HTML 파일은 이런 느낌입니다.

public/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>@ionic/react minimum start</title>
</head>
<body>
<div id="content"/>
<script src="bundle.js"></script>
</body>
</html>