분류 Reactjs

첫 번째 React 네이티브 앱 빌드

컨텐츠 정보

  • 조회 270 (작성일 )

본문

React Native를 배우고 싶으신가요? 네트워크 요청을 통해 REST API에서 가져온 국가 목록을 표시하는 첫 번째 앱을 빌드 합니다.


https://dzone.com/articles/build-your-first-react-native-app 


React Native를 배우고 싶으신가요? 네트워크 요청을 통해 REST API에서 가져온 국가 목록을 표시하는 간단한 앱인 첫 번째 React Native를 빌드 해 보겠습니다. 

이 React Native 튜토리얼은 React Native를 소개하는 것을 목표로 하며 실제 React Native 애플리케이션을 빌드 하기 전에 알아야 할 기초를 제공합니다. 

그 후 첫 번째 실제 React Native 앱을 빌드 하도록 도와드립니다. 이 기사가 끝나면 iOS 및 Android 장치에서 실행할 수 있는 React Native 앱을 빌드 할 것입니다.


React Native는 모바일 개발 플랫폼을 위해 Facebook의 React를 기반으로 구축 된 크로스 플랫폼 개발 라이브러리입니다. React Native는 2013 년 Facebook 내부의 핵톤 프로젝트로 개발되었으며 나중에 2015 년에 공개적으로 사용되었습니다. 

개발자 커뮤니티에서 큰 인기를 얻었으며 React Native 앱이 단일 코드베이스를 공유하기 때문에 여러 기술 회사에서 이를 모바일 개발 솔루션으로 채택했습니다. iOS와 Android 모두에 적용되며 진정한 네이티브 앱과 거의 구별 할 수 없습니다. 

React Native 웹 사이트에 따르면 :


2018 년에 React Native는 GitHub의 모든 저장소에서 두 번째로 많은 기여자를 기록했습니다. 오늘날 React Native는 ExpoMicrosoft를 포함하여 전 세계 개인 및 회사의 기여로 지원됩니다. 


계속해서 첫 번째 React Native 앱을 빌드 하기 전에 React Native의 장단점과 실제 기능에 대한 자세한 내용을 보여 드리겠습니다.


React Native 란 무엇입니까? 

  • React Native는 하이브리드 모바일 개발 라이브러리입니다.
  • React Native 앱은 JSX 및 Javascript로 작성되고 네이티브 코드로 컴파일됩니다.
  • React Native 앱에는 85 ~ 90 %의 공유 자바 스크립트 및 JSX 코드가 포함되어 있습니다.

React Native가 아닌 것은 무엇입니까? 

  • React Native는 웹뷰가 아닙니다
  • React Native는 React가 아닙니다.
  • React Native는 PWA가 아닙니다.
  • 이 글을 쓰는 시점에서 React Native는 웹용 React Native를 사용한 웹 개발을 지원합니다.

React Native를 채택 / 배워야 하는 이유는 무엇입니까? 

  • 동일한 코드베이스와 노력으로 여러 플랫폼 (iOS, Android, 웹, TVOS)을 대상으로 합니다.
  • 적절한 지원을 제공 할 수 있는 크고 성장하는 커뮤니티가 있습니다.
  • 사용 사례 / 비즈니스 로직에 맞게 네이티브 코드를 사용자 지정할 수 있음을 의미하는 네이티브 지원이 있습니다.
  • JavaScript에 대한 지식이 필요합니다. 자바 스크립트는 수요가 높은 언어이며 이를 배우면 엄청난 성과를 거둘 것입니다.
  • 개인적으로 스윗 스팟이라고 부르는 기능이 있습니다 : Fast Refresh (Hot Reloading)


React 네이티브 단점? 

React Native에도 몇 가지 단점이 있지만 라이브러리 개발자는 커뮤니티가 성장함에 따라 지속적으로 개선하려고 노력하고 있습니다.

  • 코드베이스는 대부분 다양한 플랫폼에서 공유되지만, 고급 React Native 프로젝트를 개발하려면 때때로 네이티브 개발에 대한 지식이 필요합니다.
  • 대부분의 React Native 앱이 네이티브 앱과 모양이 동일 해 보이지만 React Native는 네이티브 앱이 달성 한 원활한 탐색이 부족한 것 같습니다.
  • React Native 개발자는 React Native 스타일의 오류 보고가 최고는 아니지만 시간이 지남에 따라 대처한다는 데 동의합니다.


첫 번째 React 네이티브 앱 빌드 


간단한 국가 목록을 표시하는 React Native 앱을 빌드 해 보겠습니다. 앱에는 하나의 화면 만 포함되며,이 튜토리얼의 목적은 React Native 개발자 환경을 설정하고 React Native 프로그래밍 언어에 발가락을 담그는 데 도움이 되는 것이므로 기능과 스타일을 최소한으로 유지할 것입니다.


이 React Native 튜토리얼에서는 첫 번째 React Native 애플리케이션을 빌드 하기 위해 Expo를 사용할 것입니다. Expo는 장치에서 React Native 앱을 쉽게 실행하고 미리 볼 수 있기 때문에 React Native 세계의 초보자를 위한 강력한 도구입니다.


1. Expo 설치 


Expo 설치 방법에 대한 공식 문서를 따르십시오. 설치가 완료되면 이 튜토리얼로 돌아와서 다음 단계에 따라 첫 번째 React Native 앱을 빌드하세요.


2. 새로운 React Native 앱 만들기 



expo init firstapp 


‘blank‘프로젝트 선택


yarn로 작업하려면‘Y‘를 선택하십시오.


Yarn v1.19.2 found. Use Yarn to install dependencies? (Y/n)


예를 클릭하면 Expo가 마법을 작동하고 필요한 모든 파일을 생성합니다. 프로젝트에서 무슨 일이 일어나고 있는지에 대한 아이디어를 얻기 위해 디렉토리 구조를 살펴볼 수 있습니다.


3. 첫 번째 React Native 앱 실행 


다음 명령을 실행하여 새로 생성 된 React Native 앱을 시작합니다.



cd firstapp
2
yarn start


이 시점에서 이전 단계에서 Expo를 올바르게 설정했다면 새로운 React Native 프로젝트가 성공적으로로드되어야하며 다음 스크린 샷과 같이 앱을 볼 수 있어야 합니다.


Welcome message from Expo 


여러분이 만든 최초의 React Native 애플리케이션이 있습니다. 기본적으로 '앱 작업을 시작하려면 App.js를 엽니다'라고 표시되며 Expo가 제공 할 수 있는 최고의 환영 메시지가 아니라는 데 동의하지만 계속 진행할 것입니다. 다음과 같은 App.js 파일을 엽니다.


1
import { StatusBar } from 'expo-status-bar';
2
import React from 'react';
3
import { StyleSheet, Text, View } from 'react-native';
4
5
export default function App() {
6
  return (
7
    <View style={styles.container}>
8
      <Text>Open up App.js to start working on your app!</Text>
9
      <StatusBar style="auto" />
10
    </View>
11
  );
12
}
13
14
const styles = StyleSheet.create({
15
  container: {
16
    flex: 1,
17
    backgroundColor: '#fff',
18
    alignItems: 'center',
19
    justifyContent: 'center',
20
  },
21
});


이제 진행하기 전에 무슨 일이 일어나고 있는지 간결하게 요약하겠습니다.

  • styles 변수는 구성 요소의 다양한 스타일 사전을 포함합니다.
  • Function App은 React Native Functional Component로, 현재 화면과 위의 내용을 렌더링 하는 기본 구성 요소는 부모 구성 요소 App을 만들기 위해 사용하고 구성 할 구성 요소를 가져 오는 import 문입니다.

4. 국가 목록 추가 


계속해서 우리의 UI로 이 더미 화면을 다시 작성해 보겠습니다. 앞서 언급 했듯이 국가 목록을 표시 할 것입니다. 이를 위해 다음을 구현해야 합니다.


import React from 'react';
2
import { StyleSheet, Text, FlatList } from 'react-native';
3
4
export default function App() {
5
6
  const countriesData = [{"name":"Afghanistan"},{"name":"Åland Islands"},{"name":"Albania"},{"name":"Algeria"}]
7
  return (
8
    <FlatList
9
      data={countriesData}
10
      contentContainerStyle={styles.container}
11
      keyExtractor={item => item.name}
12
      renderItem={({item})=> <Text style={styles.text}>{item.name}</Text>}
13
    />
14
  );
15
}
16
17
const styles = StyleSheet.create({
18
  container: {
19
    paddingTop: 30,
20
  },
21
  text: {
22
    fontSize: 20,
23
    margin: 10
24
  },
25
});


보시다시피 App.js를 업데이트하고 몇 가지를 추가했습니다.


  • 국가 목록을 표시하는 Flatlist
  • 목록에 표시 할 더미 데이터 세트
  • 텍스트의 스타일을 포함하도록 스타일 개체를 업데이트했습니다.

아직 시작하지 않은 경우 앱을 실행하면 다음이 표시됩니다.


List of countries displayed with dummy data 


이제 작업 할 것이 있습니다. 그러나 데이터는 정적이며 변경 될 수 있는 더 긴 동적 목록을 원하며 이러한 변경 사항을 UI에 반영해야 합니다. 따라서 UI가 데이터 모델의 변경에 "반응"할 필요가 있습니다. 이것이 React의 핵심 개념이므로 React Native입니다. 그래서 우리는 State 개념을 도입해야 합니다.


React Native 구성 요소는 데이터를 상태로 유지하며 상태가 변경 될 때마다 UI가 해당 변경 사항을 반영하도록 다시 렌더링 됩니다. 화면에 표시되는 국가의 동적 목록을 저장할 countriesData라는 상태 변수를 추가해 보겠습니다.


1. const [countriesData, setCountriesData] = useState([])


useState는 React Native에서 "후크"라고 합니다. 후크에 대한 공식 React 문서에 따르면


Hook은 React 기능에 "연결"할 수있는 특수 함수입니다.


우리는 앱 countriesData의 상태를 빈 배열 []로 기본값으로 선언하고, countriesData의 값을 업데이트하는 함수 setCountriesData를 선언했습니다. 예를 들어 setCountriesData ([1,2,3,])를 호출하면 countriesData의 값이 [1,2,3,]로 업데이트 됩니다.


또 다른 중요한 후크 useEffect는 다음 코드 스 니펫에 적용될 것입니다. 간단히 말해, useEffect 내부에 작성된 모든 코드는 구성 요소가 마운트 될 때 실행됩니다.


import React, {useState, useEffect} from 'react';
2
import { StyleSheet, Text, FlatList } from 'react-native';
3
4
export default function App() {
5
6
  const [countriesData, setCountriesData] = useState([])
7
8
  function fetchCountriesData() {
9
    fetch('https://restcountries.eu/rest/v2/region/africa?fields=name')
10
      .then((response) => response.json())
11
      .then((json) => setCountriesData(json))
12
      .catch((error) => console.error(error))
13
  }
14
15
  useEffect(()=> {
16
    fetchCountriesData();
17
  })
18
19
  return (
20
    <FlatList
21
      data={countriesData}
22
      contentContainerStyle={styles.container}
23
      keyExtractor={item => item.name}
24
      renderItem={({item})=> <Text style={styles.text}>{item.name}</Text>}
25
    />
26
  );
27
}
28
29
const styles = StyleSheet.create({
30
  container: {
31
    paddingTop: 30,
32
  },
33
  text: {
34
    fontSize: 20,
35
    margin: 10
36
  },
37
});


무슨 일이 일어나고 있는지 두려워하지 마십시오. 우리는 API 엔드 포인트에서 국가 데이터를 검색하고 아프리카 국가 목록을 표시하기 위해 fetch API를 사용하고 있습니다. Fetch API는 React Native에서 네트워크 요청을 만드는 방법입니다. 아시다시피, 우리는 restcountries.eu 웹 사이트에 공개 된 무료 API 엔드 포인트를 사용했습니다. 그러면 fetch 메소드의 then() 절에서 구문 분석 된 JSON 객체가 반환됩니다. 성공적으로 파싱되면, 새로 검색된 새 국가 목록으로 countriesData 상태 변수를 업데이트합니다. 상태 개체를 업데이트 한 결과 UI도 다시 렌더링되고 화면에서 국가를 볼 수 있습니다.

List of countries with live data 


5. 첫 번째 React Native 앱 스타일링 


이제 핵심 기능을 이미 갖추고 있으므로 앱 디자인을 약간 개선하는 데 집중하겠습니다. 우리는 앱 스타일링에 초점을 맞추고 스타일 사전에 초점을 맞출 것입니다.


import React, {useState, useEffect} from 'react';
2
import { StyleSheet, Text, FlatList, Pressable, Alert } from 'react-native';
3
import { StatusBar } from 'expo-status-bar';
4
5
export default function App() {
6
7
  const [countriesData, setCountriesData] = useState([])
8
9
  function fetchCountriesData() {
10
    fetch('https://restcountries.eu/rest/v2/region/africa?fields=name;capital')
11
      .then((response) => response.json())
12
      .then((json) => setCountriesData(json))
13
      .catch((error) => console.error(error))
14
  }
15
16
  useEffect(()=> {
17
    fetchCountriesData();
18
  })
19
20
  return (
21
    <>
22
      <StatusBar style='light'/>
23
      <FlatList
24
        data={countriesData}
25
        contentContainerStyle={styles.container}
26
        keyExtractor={item => item.name}
27
        renderItem={({item})=> <Text onPress={() => {Alert.alert(`The Capital of ${item.name} is ${item.capital}`)}} style={styles.text}>{item.name}</Text>}
28
      />
29
    </>
30
  );
31
}
32
33
const styles = StyleSheet.create({
34
  container: {
35
    paddingTop: 30,
36
    backgroundColor: '#483D8B'
37
  },
38
  text: {
39
    fontSize: 18,
40
    margin: 5,
41
    color: '#fff'
42
  },
43
});


보시다시피 '# 483D8B'16 진수 코드와 함께 backgroundColor 속성을 제공하여 배경 색상을 보라색으로 변경했습니다.


구문은 CSS와 매우 유사하지만 약간 다릅니다. 그러나 핵심 개념은 동일하므로 이미 CSS를 알고 있다면 React Native 앱의 스타일을 지정하는 방법을 배우는 것이 매우 쉽습니다. 특히 이미 flexbox 레이아웃에 익숙한 경우.


Final app 


결론 


모바일 개발 프로세스에서 React Native를 사용하는 가장 큰 판매 포인트는 무엇이며 iOS 및 Android 용 앱을 만드는 것이 얼마나 쉬운 지 확인했습니다.


React Native 세계를 처음 접하는 초보자를 위한 놀라운 도구 인 Expo를 설정했습니다. 그런 다음 Expo를 활용하여 첫 번째 React Native 프로젝트를 만들었습니다.


그 후 기능 구성 요소, 후크 및 상태에 대해 배웠습니다. Fetch API를 사용하여 네트워크 요청을 통해 데이터를 검색했으며 스타일 시트를 수정하여 시각적 구성 요소의 스타일을 지정했습니다.


축하합니다! React Native 앱을 빌드 할 수 있었습니다. 이제 더 복잡한 기능을 추가하고 완전히 작동하는 모바일 앱을 개발하기 위해 App Store 및 Google Play Store에 게시 할 수 있는 고급 개념을 배워야 합니다. React Native에 대해 자세히 알아보고 다음 레벨로 들어가려면 최고의 React Native 리소스 목록을 확인하세요.