본 게시물은 Ionic 공식 홈페이지의 Intro Ionic React Quickstart를 따라하며 정리한 것입니다.
📌 Creating a project with the Ionic CLI
- 아이오닉 CLI로 프로젝트 생성
🤍아이오닉 CLI 설치
npm install -g @ionic/cli🤍아이오닉 리액트 프로젝트 생성
ionic start myApp blank --type=react
cd myApp
🤍브라우저에서 실행
ionic serve📌 A look at a React Component
- 리액트 컴포넌트 둘러보기
src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));src
- 베이스가 될 폴더src/index.tsx
- entry point, 리액트에서 결정되는듯!?
import React from 'react';
- JSX 구문으로 Components 작성 가능import ReactDOM from 'react-dom';
- ReactDOM을 사용 가능(React Components -> DOM 노드에 렌더링)import App from './App';
- App 폴더에서 root를 가져옴
- App은 첫 번째 React Component이며 React 앱의 부트스트랩 프로세스에서 사용됨
src/App.tsx
import React from 'react';
import { Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/home" component={Home} exact={true} />
<Route exact path="/" render={() => <Redirect to="/home" />} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);import React from 'react';
- JSX 사용을 위한 리액트 import!import { Route } from 'react-router-dom';
- 리액트의 Route(URL을 렌더링하려는 Components와 일치시키는 방법) import!import { IonApp, IonRouterOutlet } from '@ionic/react';
- Ionic Components를 사용하기 위해 import!
- 애니메이션 및 레이아웃을 위한 아이오닉 핵심 Componentsimport { IonReactRouter } from '@ionic/react-router';
- ReactRouter의 BrowserRouter Component를 감싸는 Component
- 약간의 차이점 제외하고 BrowerRouter랑 동일import Home from './pages/Home';
- Home Component import! 잠시후에 살펴보자!import '@ionic/react/css/core.css';
- 패딩, 타이포그래피 등 아이오닉에서 유틸리티 스타일 import!
const App: React.FC = () => (...);
- 앱 초기 라우팅 설정
- 리액트에서 테이터 바인딩을 수행하기 위한 값이 중괄호({}) 전달됨
- 중괄호({})를 사용하면 리액트에서 일반 문자열이 아닌 Components로 인식!
-/일 때 👉/home으로 이동 👉./pages/Home에서 가져온Home보여줌!
📌 A component with style
- 컴포넌트 스타일 살펴보기
🤍IonPage, IonContent, IonHeader
src/pages/Home.tsx
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
const Home: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Blank</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer />
</IonContent>
</IonPage>
);
};
export default Home;
IonPage
- 모든 페이지 기본 Component(route/URL이 있는)임
- header, title, content Components를 포함함
- 페이지를 만들 때는IonPage를root Components로 사용해야함
- 1) 페이지 이동이 제대로 되는지 확인!
- 2) 아이오닉 Components가 의존하는 기본 CSS 제공!
IonContent
- 페이지 주요 컨텐츠 영역
- 1) 사용자 상호 작용할 스크롤 가능한 콘텐츠 제공
- 2) 앱에서 사용할 수 있는 모든 스크롤 이벤트 제공
IonHeader
- 페이지 상단에 존재해야함
- flexbox 기반 레이아웃 처리
- IonToolbar, IonSearchbar 등 다른 Components를 위한 Component
🤍IonItem
src/pages/Home.tsx
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
IonList, IonItem, IonCheckbox, IonLabel, IonNote, IonBadge } from '@ionic/react'; ✅
import './Home.css';
const Home: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Ionic Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent> ✅
<IonList>
<IonItem>
<IonCheckbox slot="start" />
<IonLabel>
<h1>Create Idea</h1>
<IonNote>Run Idea by Brandy</IonNote>
</IonLabel>
<IonBadge color="success" slot="end">
5 Days
</IonBadge>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
export default Home;- Item은 리액트 개념(ReactAPI)과 웹 Component 개념(웹 표준 API)의 혼합을 보여줌
- 리액트 개념:
IonCheckbox의 자체 닫힘 태그 - 웹 Component 개념: slot 속성,
IonCheckbox를 배치할 위치를 알려줌
🤍IonFab
src/pages/Home.tsx
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
IonList, IonItem, IonCheckbox, IonLabel, IonNote, IonBadge,
IonFab, IonFabButton, IonIcon } from '@ionic/react'; ✅
import './Home.css';
import { add } from 'ionicons/icons'; ✅
const Home: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Ionic Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItem>
<IonCheckbox slot="start" />
<IonLabel>
<h1>Create Idea</h1>
<IonNote>Run Idea by Brandy</IonNote>
</IonLabel>
<IonBadge color="success" slot="end">
5 Days
</IonBadge>
</IonItem>
</IonList>
<IonFab vertical="bottom" horizontal="end" slot="fixed"> ✅
<IonFabButton>
<IonIcon icon={add} />
</IonFabButton>
</IonFab>
</IonContent>
</IonPage>
);
};
export default Home;<IonFab vertical="bottom" horizontal="end" slot="fixed">
- vertical, horizontal 속성으로 위치 설정, slot 속성으로 렌더링 위치 fixed
- IonContent의 스크롤 가능한 컨텐츠 외부에서 렌더링됨
🤍클릭 핸들러 연결
src/pages/Home.tsx
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
IonList, IonItem, IonCheckbox, IonLabel, IonNote, IonBadge,
IonFab, IonFabButton, IonIcon } from '@ionic/react';
import './Home.css';
import { add } from 'ionicons/icons';
import { RouteComponentProps } from 'react-router'; ✅
const Home: React.FC<RouteComponentProps> = (props) => { ✅
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Ionic Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItem>
<IonCheckbox slot="start" />
<IonLabel>
<h1>Create Idea</h1>
<IonNote>Run Idea by Brandy</IonNote>
</IonLabel>
<IonBadge color="success" slot="end">
5 Days
</IonBadge>
</IonItem>
</IonList>
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton onClick={() => props.history.push('/new')}> ✅
<IonIcon icon={add} />
</IonFabButton>
</IonFab>
</IonContent>
</IonPage>
);
};
export default Home;<IonFabButton onClick={() => props.history.push('/new')}>
- 버튼 클릭하면 페이지 이동하는 기능
- 리액트 Router의 navigation API에 접근해야함
- Home 구성 요소에 전달된 Props를 통해 React Routers API에 접근 가능
- Router/Route 컨텍스트에서 렌더링되기 때문!
- 현재는 페이지가 없어서 에러남
📌 Creating a new Route
- 새로운 페이지 만들기
src/App.tsx
...
import Home from './pages/Home';
import NewItem from './pages/NewItem'; ✅
...
const App: React.FC = () => {
const isAuthed = true;
return (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/home" component={Home} /> ✅
<Route path="/new" component={NewItem} /> ✅
<Redirect exact from="/" to="/home" /> ✅
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
}
export default App;src/pages/NewItem.tsx 새로 생성!
import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';
const NewItem: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton />
</IonButtons>
<IonTitle>New Item</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent></IonContent>
</IonPage>
);
};
export default NewItem;IonBackButton
- 뒤로 가기 버튼- 페이지 새로고침하면 사라짐!(메모리 내 히스토리 손실로 인함)
src/pages/NewItem.tsx
...
<IonButtons slot="start">
<IonBackButton defaultHref="/home" /> ✅
</IonButtons>
...📌 Adding Icons
- 아이콘 추가
import { camera } from 'ionicons/icons';
...
<IonIcon icon={camera} />
...- 아이오닉 리액트 프레임워크는 아이콘이 사전설치됨
ionicons패키지에서 원하는 아이콘을 가져와 icon prop을 통해 IonIcon 구성 요소에 전달하기만 하면 됨
📌 Build a Native App
- 앱 빌드 및 배포
- 아이오닉 Components는 iOS, Android 및 PWA를 포함한 모든 곳에서 작동함
- 모바일, 데스크톱 등에 배포하기 위해 아이오닉의 크로스 플랫폼 앱 런타임
Capacitor를 사용함 Capacitor는 (웹 표준을 지원하는 플랫폼에서) 네이티브 장치 기능에 액세스하면서
앱이 가능한 한 웹 표준에 가깝게 유지되도록 하는 일관된 웹 중심 API 세트를 제공함
🤍프로젝트에 Capacitor 추가
ionic integrations enable capacitor🤍Platforms 추가
ionic capacitor add- Capacitor를 설치한 후 앱에 기본 플랫폼을 추가
🤍빌드
ionic capacitor build- 표준 네이티브 IDE(Xcode 또는 Android Studio) 열림
- Android Studio에서 빌드하면 됨!
- https://zinle.tistory.com/519 << 이 블로그 보고 빌드하니까 됨!
더 오래하면 돼.