Ionic 및 React로 모바일 앱 구축
게시 됨: 2022-03-10Ionic은 최근 React에 대한 지원을 추가했습니다. 이제 React 개발자는 하이브리드 모바일 앱과 프로그레시브 웹 앱(PWA)을 구축하기 위해 Ionic의 이점을 얻을 수 있습니다. 이 게시물에서는 처음부터 간단한 데모 앱을 빌드하여 React와 함께 Ionic을 사용하는 방법을 보여줍니다.
전제 조건
이 튜토리얼을 제대로 따르려면 다음 전제 조건이 필요합니다.
- 시스템에 설치된 Node.js 및 npm의 최신 버전,
- TypeScript 및 React에 대한 실무 지식.
다음 명령을 실행하여 최신 Node.js 버전(v10)이 설치되어 있는지 확인할 수 있습니다.
$ node -vReact와 Ionic 소개
React와 Ionic에 대한 간략한 소개부터 시작하겠습니다.
공식 웹사이트에 따르면:
“React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. 이를 통해 '컴포넌트'라고 하는 작고 격리된 코드 조각으로 복잡한 UI를 구성할 수 있습니다.”
React는 UI 구축에 중점을 두고 있으며 원격 데이터 가져오기 및 라우팅과 같이 웹 개발에 필요한 일반적인 작업을 위한 내장 도구를 제공하지 않으므로 이러한 작업에는 기존 타사 라이브러리를 사용해야 합니다.
Ionic 웹사이트에 따르면:
"Ionic Framework는 단일 코드베이스에서 네이티브 iOS, Android 및 웹용 고품질 크로스 플랫폼 앱을 개발하기 위한 무료 오픈 소스 모바일 UI 툴킷입니다."
기본적으로 이것은 하이브리드 모바일 앱 및 PWA를 빌드하기 위해 일반 JavaScript 또는 Angular, React 또는 Vue와 같은 널리 사용되는 프론트 엔드 프레임워크 또는 라이브러리와 함께 사용할 수 있는 UI 구성 요소 세트입니다.
이 자습서에서는 다음과 같은 일부 Ionic UI 구성 요소를 보고 사용합니다.
- IonMenu: 이를 통해 탐색 창은 현재 보기의 측면에서 밀어 넣습니다.
- IonToolbar: 이 상단 막대는 콘텐츠 위 또는 아래에 배치됩니다.
- IonHeader: 이 상위 구성 요소는 도구 모음 구성 요소를 보유합니다.
- IonContent: 이 구성 요소는 스크롤 가능한 영역 및 기타 항목을 제어하는 메서드와 함께 콘텐츠 영역을 제공합니다. 단일 보기에는 하나의 콘텐츠 구성 요소만 필요합니다.
- IonList: 이 구성 요소는 이미지 및 텍스트와 같은 유사한 데이터 콘텐츠를 가진 항목을 포함합니다. IonItem 개체로 구성됩니다.
- IonItem: 이 구성 요소에는 텍스트, 아이콘, 아바타, 이미지, 입력 및 기타 기본 또는 사용자 정의 요소가 포함될 수 있습니다.
- IonButton: 이 구성 요소는 간단한 표준 버튼 기능이 필요한 양식 또는 모든 곳에서 사용할 수 있는 클릭 가능한 요소를 제공합니다.
Ionic CLI v5 설치
Ionic의 명령줄 인터페이스(CLI) 버전 5는 React 기반의 Ionic 프로젝트 생성을 지원합니다. 이제 npm에서 도구를 설치하여 시작하겠습니다.
CLI를 열고 다음 명령을 실행합니다.
$ npm install -g ionic작성 당시 Ionic의 CLI v5.2.3이 최신 버전입니다.
참고 : *시스템에 Node.js를 설치한 방법에 따라 권한 오류가 발생하면 macOS 또는 Linux에서 명령 앞에 sudo 를 추가하거나 Windows에서 관리자로 명령 프롬프트를 실행해야 할 수 있습니다. npm 권한을 수정하거나 nvm과 같은 도구를 사용할 수도 있습니다.*
다음으로 Cordova Resources (로컬로 Cordova 리소스를 생성하는 데 사용) 및 Native Run (앱 바이너리를 기기에 배포하는 데 사용)을 설치합니다.
$ npm install -g cordova-res native-run이는 실제 모바일 장치 또는 에뮬레이터에서 애플리케이션을 테스트하려는 경우에만 필요합니다.
Ionic 및 React 프로젝트 만들기
이제 React를 기반으로 프로젝트를 생성해 보겠습니다. 터미널로 돌아가 작업 디렉토리에 있는지 확인하고 다음 명령을 실행합니다.
$ ionic start myApp --type=react --type=react 를 사용하여 React 기반 프로젝트를 생성합니다. 다음으로 사용 가능한 템플릿에서 시작 템플릿을 선택해야 합니다. 사이드 메뉴와 탐색 기능이 있는 스타터 템플릿의 사이드 메뉴를 선택 sidemenu .
프로젝트를 생성하고 종속성을 설치한 후 다음 명령을 사용하여 로컬에서 앱을 제공할 수 있습니다.
$ cd ./myApp $ ionic serve앱은 https://localhost:8100 주소에서 사용할 수 있으며 실제로 웹 브라우저를 사용하여 앱을 사용할 수 있습니다.
Ionic은 원래 웹 앱을 만들도록 설계된 웹 기술을 기본 컨테이너(Cordova 또는 Capacitor)와 함께 사용하여 Java와 같은 대상 플랫폼에 대한 기본 기술을 사용하지 않고 모바일 앱을 빌드하기 때문에 하이브리드 모바일 프레임워크라고 합니다. 또는 Android용 Kotlin 또는 iOS용 Swift.
모바일 앱은 실제로 웹 애플리케이션이기 때문에 에뮬레이터나 실제 모바일 장치를 사용하지 않고 웹 브라우저에서 테스트하여 대부분의 개발을 수행할 수 있습니다. 단, 앱에서 사용했습니다. 사실, 웹 브라우저에서 개발하는 동안 기본 기능을 제공하고 전체 테스트를 수행하는 플러그인을 모방하기 위해 특정 기술을 사용하는 것도 가능합니다.
우리 프로젝트 청소
두 페이지(홈 및 목록)와 메뉴가 있는 앱의 기본 구조가 있습니다. 단순한 상용구 코드이므로 목록 페이지를 제거하겠습니다.
먼저 src/pages/List.tsx 파일을 제거한 다음 src/App.tsx 파일을 열고 appPages 배열에서 목록 페이지 항목을 제거합니다.
const appPages: AppPage[] = [ { title: 'Home', url: '/home', icon: home } ];또한 파일에서 목록 페이지 가져오기를 제거합니다.
import List from './pages/List'; 다음으로 App 구성 요소에서 <Route path="/:tab(home)/list" component={List} exact={true} /> 를 제거합니다.
const App: React.FunctionComponent = () => ( <IonApp> <IonReactRouter> <IonSplitPane content> <Menu appPages={appPages} /> <IonPage> <IonRouterOutlet> <Route path="/:tab(home)" component={Home} exact={true} /> <Route exact path="/" render={() => <Redirect to="/home" />} /> </IonRouterOutlet> </IonPage> </IonSplitPane> </IonReactRouter> </IonApp> ); export default App; App 구성 요소는 응용 프로그램에서 렌더링되는 루트 구성 요소입니다. src/index.tsx 파일을 열면 다음 코드를 찾을 수 있습니다.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); render() 메서드는 제공된 root 요소의 DOM에 React 요소를 렌더링하는 데 사용됩니다.
앱 테마
Ionic 프로젝트를 만들고 제공하고 정리한 후 이제 UI 색상을 변경하여 보다 전문적으로 보이도록 하는 방법을 살펴보겠습니다.
사이드 메뉴부터 시작하겠습니다. src/components/Menu.tsx 파일을 열고 primary 값이 있는 color 속성을 IonToolbar , IonContent , IonList 및 IonItem UI 구성 요소에 추가합니다.
const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> );const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> );
Ionic은 UI 구성 요소의 색상을 변경하는 데 사용할 수 있는 몇 가지 기본 색상(1차, 2차, 3차, 성공, 경고, 위험, 밝음, 중간 및 어두움)을 제공합니다. color 속성을 사용하여 기본 색상을 변경하기 위해 Ionic 구성 요소에 색상을 적용할 수 있습니다. 자세한 내용은 "색상"을 참조하십시오.
이러한 색상에는 기본값이 있지만 미리 정의된 CSS 변수를 통해 사용자 정의할 수 있습니다. "색상 수정"을 참조하십시오.
이것은 우리 메뉴의 스크린샷입니다:
다음으로 홈 페이지의 색상을 변경해 보겠습니다. src/pages/Home.tsx 파일을 열고 IonToolbar 및 IonContent 구성 요소의 color 속성을 primary 으로 설정합니다.
const HomePage: React.FunctionComponent = () => { return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > </IonContent> </> ); };다음은 페이지의 스크린샷입니다.
Axios 설치 및 REST API 사용
Axios를 설치하고 애플리케이션에서 타사 RESTful API를 사용하는 방법과 Ionic 카드 및 목록 구성 요소를 사용하여 가져온 데이터를 표시하는 방법도 살펴보겠습니다.
애플리케이션을 테마로 설정했으면 이제 Axios를 사용하여 데이터를 가져오는 방법을 살펴보겠습니다. NewsAPI.org에서 제공하는 타사 API를 사용합니다.
먼저 API와 통신할 수 있도록 API 키를 가져와야 합니다. 등록 페이지로 이동하여 정보를 입력하고 계정을 등록합니다. API 키가 제공됩니다. 참고하고 계속합시다.
터미널로 돌아가서 다음 명령을 실행하여 Axios를 설치하십시오.
$ npm install axios --save 다음으로 src/pages/Home.tsx 파일을 열고 Axios 및 IonButton 가져오기를 시작합니다.
import { IonButton } from '@ionic/react'; import axios from 'axios'; 다음으로 API_KEY 및 URL 상수 변수를 정의합니다.
const API_KEY = "<YOUR_API_KEY_HERE>"; const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;URL 변수에서 엔드포인트를 추가하여 소스인 TechCrunch에서 주요 헤드라인을 가져옵니다. 사용 가능한 소스에서 원하는 소스를 사용할 수 있습니다.
참고 : API_KEY 변수에 자신의 API 키를 넣어야 합니다.
다음으로 fetchArticles() 메서드를 다음과 같이 정의합니다.
const fetchArticles = () => { return axios({ url: URL, method: 'get' }).then(response => { console.log(response); return response.data; }) }; 우리는 단순히 axios() 메서드를 호출하여 GET 요청을 뉴스 엔드포인트로 보내고 메서드의 결과는 뉴스 데이터를 가져오기 위해 해결해야 하는 약속입니다.
다음으로 fetchArticles() 메서드를 호출하고 반환된 약속을 해결하기 위해 다음과 같이 HomePage 구성 요소를 업데이트합니다.
const HomePage: React.FunctionComponent = () => { const [articles, setArticles] = React.useState([]); const items: any[] = []; React.useEffect(() => { fetchArticles().then(data => setArticles(data.articles)); }, []); return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > <IonList color="primary"> { articles.map(a => { return ( <IonItem> {a['title']} <IonButton href={a['url']} color="primary" slot="end">Read</IonButton> </IonItem> ); }) } </IonList> </IonContent> </> ); }; 함수 구성 요소에서 먼저 React의 useState() 후크를 호출하여 API에서 뉴스 기사를 가져온 후 뉴스 기사를 보유할 articles 상태 변수를 생성합니다.
useState() 는 초기 값으로 빈 배열과 변수 값을 변경하는 데 사용할 수 있는 함수가 있는 상태 변수를 반환합니다. 구조 해제 할당을 사용하여 반환된 쌍의 값을 개별 변수(예: articles 및 setArticles() )로 압축을 풉니다.
다음으로 useEffect() 후크를 호출하여 구성 요소에서 부작용을 수행합니다. 우리의 경우 부작용은 약속을 반환하는 fetchArticles() 메서드를 사용하여 뉴스 API에서 데이터를 가져오는 것입니다. 약속이 해결되면 setArticles() 메서드를 호출하여 articles 변수에 뉴스 데이터를 할당합니다.
useState() 와 useEffect() 는 모두 React 16.8에 도입된 내장 React 후크입니다. 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다. useEffect() 후크는 클래스 기반 구성 요소에 결합된 componentDidMount , componentDidUpdate 및 componentWillUnmount 수명 주기 메서드를 호출하는 것과 같습니다.
마지막으로 보기 템플릿에서 map() 메서드를 사용하여 articles 배열을 반복하고 IonList 구성 요소의 IonItem 요소 내부에 각 뉴스 기사의 제목과 페이지로 이동하는 버튼을 표시합니다. 전체 기사.
다음은 페이지의 스크린샷입니다.
이 GitHub 리포지토리에서 소스 코드를 찾을 수 있습니다.
결론
이 튜토리얼에서는 Ionic과 React를 모두 사용하기 시작했으며 Axios 클라이언트를 사용하여 타사 API에서 뉴스 데이터를 가져와 표시하는 간단한 모바일 애플리케이션을 구축하는 데 사용했습니다. 또한 React에서 후크를 사용하는 방법, 즉 useState() 및 useEffect() 후크를 사용하여 상태를 생성하고 React 함수 구성 요소 내에서 부작용을 수행하는 방법을 보았습니다. Ionic을 사용하여 React를 기반으로 프로젝트를 생성하는 것이 얼마나 쉬운지와 구성 요소의 색상 속성을 사용하여 애플리케이션을 테마로 지정할 수 있는 방법을 보았습니다.