기존 React 프로젝트에 Ionic React 추가하기

이번 주 초에 Ionic React를 출시했습니다(공지사항here 참조). 새로운 Ionic React 프로젝트를 시작하는 것은 매우 쉽지만 기존 React 프로젝트가 있고 Ionic을 여기에 통합하려는 경우 어떻게 해야 합니까?

다행히 프로세스는 매우 쉽습니다. 이 짧은 가이드에서는 기존 프로젝트에서 Ionic React를 사용하는 방법을 살펴보겠습니다. 개별 구성 요소를 사용하는 방법부터 시작한 다음 전체 Ionic 앱 경험을 얻는 방법에 대해 설명하겠습니다.

개별 이온 구성 요소 사용

Ionic React에는 앱에서 즉시 사용할 수 있는 약 100개의 구성 요소가 있어 모바일 친화적으로 만들 수 있습니다.

구성 요소 사용을 시작하려면 프로젝트에 @ionic/react 패키지를 추가하십시오.

npm i @ionic/react

다음으로 기본 앱 파일의 어딘가에 Ionic용 핵심 CSS를 가져옵니다.

import '@ionic/react/css/core.css';

이제 구성 요소를 가져와 즉시 사용할 수 있습니다. 여기에서 IonButton 및 IonDatetme 구성 요소를 가져와 앱의 모든 위치에서 사용합니다.

import { IonButton, IonDatetime } from '@ionic/react';

<IonDatetime displayFormat="MM/DD/YYYY" placeholder="Select Date"></IonDatetime>
<IonButton fill="clear">Start</IonButton>

이온 페이지 사용

앱의 일부를 변환하고 전체 Ionic 경험을 제공하려는 경우 이 설정을 얻기 위해 수행해야 할 몇 가지 추가 단계가 있습니다.

먼저 페이지의 전체 구조와 일부 유틸리티 도우미를 설정하는 데 도움이 되는 몇 가지 추가 CSS 파일을 가져옵니다.

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

다른 CSS 프레임워크(예: Bootstrap)를 사용하는 경우 Ionic 페이지를 해당 프레임워크에서 격리할 수 있습니다. 이렇게 하면 라이브러리 간에 CSS 충돌이 없는지 확인하는 데 도움이 됩니다.

다음으로 @ionic/react-router 라이브러리를 설치합니다.

npm i @ionic/react-router

Ionic React Router 라이브러리는 인기 있는 React Router 라이브러리에 대한 작은 래퍼이며 기본과 유사한 페이지 전환에 필요한 기능을 제공하는 데 도움이 됩니다.

기본 Ionic 페이지에는 몇 가지 기본 구성 요소가 필요합니다. 먼저 IonApp 구성 요소( @ionic/react 에서)를 루트 구성 요소로 사용한 다음 IonReactRouter ( @ionic/react-router 에서)를 사용합니다.
IonApp는 구조 구성 요소에 필요한 스타일 지정과 함께 기본 컨테이너를 설정합니다. IonReactRouter는 React RoutersBrowserRouter를 위한 작은 래퍼이며 그 자리에서 사용해야 합니다.

그런 다음 Ionic 페이지를 관리하는 모든 경로를 IonRouterOutlet 로 래핑합니다.

<IonApp>
  <IonReactRouter>
    <IonRouterOutlet>
      <Route path="/" exact component={Home} />
      <Route path="/about" exact component={About} />
    </IonRouterOutlet>
  </IonReactRouter>
</IonApp>

이제 다음과 같이 Ionic 페이지를 설정할 수 있습니다.

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>My Page</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
    <IonDatetime displayFormat="MM/DD/YYYY" placeholder="Select Date"></IonDatetime>
    <IonButton fill="clear">Start</IonButton>
  </IonContent>
</IonPage>

IonPage는 "Ionic"페이지의 기본 구성 요소로 갖는 것이 중요합니다. IonPage는 페이지 전환을 수행하기 위해 찾는 요소입니다.

Ionic React의 라우팅 및 탐색에 대한 자세한 내용은 here 을 참조하십시오.

테마 사용자 정의

구성 요소의 모양과 느낌을 사용자 지정하기 위해 구성 요소에 테마를 제공하기 위해 재정의할 수 있는 몇 가지 CSS 변수가 있습니다. 기본 CSS 파일의 어딘가에 다음을 설정하십시오.

:root {
  --ion-color-angular: #ac282b;
  --ion-color-communication: #8e8d93;
  --ion-color-tooling: #fe4c52;
  --ion-color-services: #fd8b2d;
  --ion-color-design: #fed035;
  --ion-color-workshop: #69bb7b;
  --ion-color-food: #3bc7c4;
  --ion-color-documentation: #b16be3;
  --ion-color-navigation: #6600cc;

  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  --ion-color-secondary: #0cd1e8;
  --ion-color-secondary-rgb: 12, 209, 232;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0bb8cc;
  --ion-color-secondary-tint: #24d6ea;

  --ion-color-tertiary: #7044ff;
  --ion-color-tertiary-rgb: 112, 68, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #633ce0;
  --ion-color-tertiary-tint: #7e57ff;

  --ion-color-success: #10dc60;
  --ion-color-success-rgb: 16, 220, 96;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #0ec254;
  --ion-color-success-tint: #28e070;

  --ion-color-warning: #ffce00;
  --ion-color-warning-rgb: 255, 206, 0;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #e0b500;
  --ion-color-warning-tint: #ffd31a;

  --ion-color-danger: #f04141;
  --ion-color-danger-rgb: 245, 61, 61;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #d33939;
  --ion-color-danger-tint: #f25454;

  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 34, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;

  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 244, 244;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
}

Ionic 앱 테마 지정에 대한 자세한 내용은 가이드here를 참조하세요.

마무리

기존 React 프로젝트에 Ionic React를 추가하는 것은 매우 간단하며 몇 분 안에 완료할 수 있습니다.

Ionic React의 개별 구성 요소를 사용하는 가장 좋은 점은 필요한 구성 요소만 가져올 수 있다는 것입니다. 각 구성 요소는 번들 크기를 부풀리지 않도록 런타임에 지연 로드됩니다. 따라서 Ionic React는 모바일 장치에서 멋지게 보이고 작동해야 하는 기존 프로젝트에 추가하는 데 이상적입니다.