분류 Reactjs

2020 년에 React Native 시작하기

컨텐츠 정보

  • 조회 314 (작성일 )

본문

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

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

이 기사가 끝나면 iOS 및 Android 장치에서 실행할 수 있는 React Native 앱을 빌드 할 것입니다.


https://hackernoon.com/getting-start-on-react-native-in-2020-4p2d3ufp 


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


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


React Native 웹 사이트에 따르면 :


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


계속해서 첫 번째 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 Native 단점? 


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가 발견되었습니다. Yarn을 사용하여 종속성을 설치 하시겠습니까? (Y/n)


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


3. 첫 번째 React Native 앱 실행 


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


cd firstapp
yarn start

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


images%2F7hNScric1WcTcZqxOlzpN8s54n43-mp403xjz.jpeg?alt=media&token=24447747-8066-4928-ba32-fcabd1aaa8b8 


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


import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

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


  • styles 변수는 구성 요소의 다양한 스타일 사전을 포함합니다.
  • 함수 App은 React Native Functional Component이며, 현재 화면에 표시되는 것을 렌더링 하는 기본 구성 요소는 상위 구성 요소 App을 만들기 위해 사용하고 구성 할 구성 요소를 가져 오는 import 문입니다.

4. 국가 목록 추가 


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


import React from 'react';
import { StyleSheet, Text, FlatList } from 'react-native';

export default function App() {

  const countriesData = [{"name":"Afghanistan"},{"name":"Åland Islands"},{"name":"Albania"},{"name":"Algeria"}]
  return (
    <FlatList
      data={countriesData}
      contentContainerStyle={styles.container}
      keyExtractor={item => item.name}
      renderItem={({item})=> <Text style={styles.text}>{item.name}</Text>}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
  },
  text: {
    fontSize: 20,
    margin: 10
  },
});

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


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

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


images%2F7hNScric1WcTcZqxOlzpN8s54n43-6j523xhb.jpeg?alt=media&token=29675e47-1a99-4447-a454-df326ccdb351 


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


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


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

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


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


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


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


import React, {useState, useEffect} from 'react';
import { StyleSheet, Text, FlatList } from 'react-native';

export default function App() {

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

  function fetchCountriesData() {
    fetch('https://restcountries.eu/rest/v2/region/africa?fields=name')
      .then((response) => response.json())
      .then((json) => setCountriesData(json))
      .catch((error) => console.error(error))
  }

  useEffect(()=> {
    fetchCountriesData();
  })

  return (
    <FlatList
      data={countriesData}
      contentContainerStyle={styles.container}
      keyExtractor={item => item.name}
      renderItem={({item})=> <Text style={styles.text}>{item.name}</Text>}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
  },
  text: {
    fontSize: 20,
    margin: 10
  },
});

무슨 일이 일어나고 있는지 두려워하지 마십시오. fetch API를 사용하여 API 엔드 포인트에서 국가 데이터를 검색하고 아프리카 국가 목록을 표시합니다. Fetch API는 React Native에서 네트워크 요청을 만드는 방법입니다. 아시다시피 Google은 restcountries.eu 웹 사이트에 공개 된 무료 API 엔드 포인트를 사용했습니다.


그러면 가져 오기 메소드의 then() 절에서 파싱 된 JSON 객체가 반환됩니다. 성공적으로 파싱되면, 새롭게 검색된 새로운 국가 목록으로 countriesData 상태 변수를 업데이트합니다. 상태 개체를 업데이트 한 결과 UI도 다시 렌더링 되고 화면에서 국가를 볼 수 있습니다.


images%2F7hNScric1WcTcZqxOlzpN8s54n43-lel3x0x.jpeg?alt=media&token=ca2f1aeb-99ac-422a-a1ce-f85548ab44bc 


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


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


import React, {useState, useEffect} from 'react';
import { StyleSheet, Text, FlatList, Pressable, Alert } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {

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

  function fetchCountriesData() {
    fetch('https://restcountries.eu/rest/v2/region/africa?fields=name;capital')
      .then((response) => response.json())
      .then((json) => setCountriesData(json))
      .catch((error) => console.error(error))
  }

  useEffect(()=> {
    fetchCountriesData();
  })

  return (
    <>
      <StatusBar style='light'/>
      <FlatList
        data={countriesData}
        contentContainerStyle={styles.container}
        keyExtractor={item => item.name}
        renderItem={({item})=> <Text onPress={() => {Alert.alert(`The Capital of ${item.name} is ${item.capital}`)}} style={styles.text}>{item.name}</Text>}
      />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
    backgroundColor: '#483D8B'
  },
  text: {
    fontSize: 18,
    margin: 5,
    color: '#fff'
  },
});

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


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


images%2F7hNScric1WcTcZqxOlzpN8s54n43-dv183xx2.gif?alt=media&token=9898cf85-31ce-4c9a-a5b7-1acca82550d7 



결론 


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


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


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


축하합니다! React Native 앱을 빌드 할 수 있었습니다. 이제 더 복잡한 기능을 추가하고 완전히 작동하는 모바일 앱을 개발하기 위해 App Store 및 Google Play Store에 게시 할 수 있는 고급 개념을 배워야 합니다.


이 최고의 React Native 리소스 목록을 확인하여 React Native에 대해 자세히 알아보고 다음 단계로 넘어 가세요.


다음 단계 


이제 최고의 React Native 개발 도구에 대해 배웠으므로 살펴볼 수 있는 몇 가지 다른 주제가 있습니다.


Firebase 


React Native의 방법 

Payments 


Authentication 



다음 React Native 앱을 시작하기 위한 기반이 필요한 경우 React Native 템플릿 중 하나를 활용하여 개발 시간을 절약 할 수 있습니다.