React Ionic 정리

이번에 공모전 앱 프로젝트를 함께 참가하게되면서 Ionic 프레임워크를 접하게되었다.

HTML, CSS, JS를 IOS테마, Material Design 으로 각 네이티브 환경에 맞게 적용된다. React Native 와 비교하면 모바일 기기와 더불어 PWA, web, 자동차, 냉장고... 에서도 실행가능한 형태로 빌드가 가능하다.

 

정말 웹개발만하면되는데, 네이티브 API 를 사용하기 위해서 Capacitor 이나 Cordova 를 사용해서 SDK 권한을 얻어서 블루투스, 카메라, GPS 등의 기본기능도 사용가능하다.

직접 사용해보면서 PWA로 아이폰과 아이패드에서 다운받아봤는데 UX가 상당히 괜찮았다. 그냥 앱다운로드해서 사용하는 느낌이었다. 몇달전 웹브라우저가 모바일 푸시알림을 곧 지원한다는 소리에 PWA가 급부상하게 될거같은 의견이 분분했는데 직접 체감해보니, 어렵사리 앱스토어 올리고, 네이티브 앱개발하는 비용을 많이 줄 일 수 있을것이라 생각된다.

 

물론 크로스플랫폼의 어쩔수없는 성능차이는 존재하겠지만, 왠만한 앱정도면 커버되지 않을까 하는 생각이든다.

또한 온전히 css를 그대로 사용해서 스타일링이 가능하다는 점이 접근성이 좋고, 사실 써보니 util css도 너무나 잘 제공되어있어서 쓸일이 거의 색상,border,그림자 조정정도면 충분했었다.

 

Page Layout

크게는 Header, Content, Footer 세개가 있다.

그래서 문서에서는 아래 3가지 컴포넌트를 Page의 핵심 구성요소라고 한다.

<IonPage>
    <IonHeader>
		...
    </IonHeader>
    
    <IonContent>
		...
    </IonContent>

    <IonFooter>
		...
    </IonFooter>

</IonPage>

---

Rotuer

라우터 설정시 "/" 경로는 직접적으로 라우팅하면안된다. "/hom" ->"/" 리다이렉트 하도록 사용해야됨. 이거 때문에 삽질 2시간은 했다... 왜 안되는지 설명은 안되어있다. 답답s.. 

라우터는 이미 내장되어있다.

최상위 컴포넌트는 <IonApp> 이고 <IonReactRouter>가 <BrouswerRouter> 를 매핑하고있다.

<IonRouterOutlet> 하위에 엔드포인트들을 정의해주면 된다.

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/home" component={Home} />
        <Route exact path="/todo" component={Todo} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

 

 

아래와 같이 로그인 여부에 따라서 라우팅을 분기처리해줄 수 있도록 props를 내려줄 수 있는데, <IonReactRouter> 단계에서 분기처리 해주는 것도 좋은 방법이라고 생각한다.

<Route
  exact
  path="/dashboard"
  render={(props) => {
    return isAuthed ? <DashboardPage {...props} /> : <LoginPage />;
  }}
/>

Ionic에서 라우팅은 선형라우팅을 사용한다. 여느 앱에서의 경험처럼 스택처럼 페이지를 push, pop 하면서 이전페이지로 돌아가고, 이전페이지의 상태는 유지되어있다. <IonRouterOutlet>에 Route를 정의해두었을때, 페이지마다의 상태를 유지 시키도록 해준다.

routerLink

<IonButton routerLink={"/todo"}>GO TO TODO Page</IonButton>

---

Tabs

라우팅을 버튼과 함께 사용하기도 하지만, 상단 혹은 하단 탭을 이용할 수 있습니다.

tab은 별도의 애니메이션을 지원하지 않습니다.

* 아래와 같이 탭 컴포넌트와, outlet 을 사용해서 구조를 변경해주면 됩니다.

<IonReactRouter>
  <IonTabs>
    <IonTabBar slot={"bottom"}>
      <IonTabButton tab="home" href="/home">
        <IonLabel>HOME</IonLabel>
      </IonTabButton>
      <IonTabButton tab="list" href="/list">
        <IonLabel>TODO</IonLabel>
      </IonTabButton>
    </IonTabBar>
    <IonRouterOutlet>
      <Route exact path="/list" component={List} />
      <Route exact path="/home" component={Home} />
      <Redirect exact from={"/"} to={"/home"} />
    </IonRouterOutlet>
  </IonTabs>
</IonReactRouter>

로그인 상태에 따른 라우팅 분기처리

const App: React.FC = () => {
  const [isLogin, setIsLogin] = useState(true);

  return (
    <IonApp>
      {isLogin ? (
        <IonReactRouter>
          <IonTabs>
            <IonTabBar slot={"bottom"}>
              <IonTabButton tab="home" href="/home">
                <IonIcon icon={home} />
                <IonLabel>HOME</IonLabel>
              </IonTabButton>
              <IonTabButton tab="list" href="/list">
                <IonIcon icon={list} />
                <IonLabel>TODO</IonLabel>
              </IonTabButton>
              <IonTabButton tab="settings" href="/settings">
                <IonIcon icon={settings} />
                <IonLabel>settings</IonLabel>
              </IonTabButton>
            </IonTabBar>
            <IonRouterOutlet>
              <Route exact path="/list" component={List} />
              <Route exact path="/home" component={Home} />
              <Route exact path="/settings" component={Settings} />
              <Redirect exact from={"/"} to={"/home"} />
            </IonRouterOutlet>
          </IonTabs>
        </IonReactRouter>
      ) : (
        <IonReactRouter>
          <Route exact path="/home" component={Login} />
          <Redirect exact from={"/"} to={"/home"} />
        </IonReactRouter>
      )}
    </IonApp>
  );
};

export default App;

다양한 컴포넌트 및 hooks

블로그에 포스팅하는게 따라는거에 그치지 못할 정도로 너무 간편하고, 예시가 잘 소개되어있다.

정말 아이오닉은 특히나, 웹앱을 구현하기 위한 컴포넌트와 hook 들을 사용해야 하기 때문에, 이해하는 것 외 일절 조금이라도 외운다는 생각은 버리는게 좋은거 같다.

 

Overview에서 필요한 항목 찾기

Introduction to Ionic | Ionic Documentation

Ionic React Doc

Ionic React | Ionic Documentation

React PWA 설정 & Firebase Deploy

Progressive Web Apps in React | Ionic Documentation

React PWA 각종 API 패키지 및 설정

Your First Ionic App: React | Ionic Documentation

Compoents

UI Components | Ionic Documentation