«   2022/10   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Archives
Today
5
Total
96,331
관리 메뉴

차근차근

[React-Native] (3) 애플리케이션 만들기 본문

대학교/FE

[React-Native] (3) 애플리케이션 만들기

SWKo 2020. 3. 10. 17:47

0. 환경설정

  • 리액트 네이티브 개발 환경 설정 방법은 크게 두 가지로 나눌 수 있다.
    • 하나, 매우 빠르고 쉽게 설정이 가능한 Create React Native App이라는 도구를 사용하는 방법이다.
    • 둘, 아주 전형적인 방법으로 리액트 네이티브와 그 dependency까지 모두 설치하게 되는 방법이다.

1. 개발 환경 설정: Create React Native App

  • Create React Native App은 Xcode나 안드로이드 스튜디오를 설치할 필요 없이 리액트 네이티브 앱을 생성하고 실행할 수 있게 해주는 커맨드 라인 도구이다.
  • npm을 이용하여 create-react-native-app 패키지를 설치한다.
  • 리액트 네이티브는 npm을 이용하여 dependency를 설치한다.
  • npm install -g create-react-native-app
  • Create React Native App을 이용하여 새로운 프로젝트를 생성하는 명령어는 다음과 같다.
  • create-react-native-app first-project
  • 위 명령어는 애플리케이션 프로젝트를 생성하고 보일러플레이트(boiler-plate) 코드와 함께 약간의 자바스크립트 디펜던시를 설치한다.
  • 프로그래밍에서 말하는 보일러플레이트(boiler-plate)는 동작을 위해 반드시 포함되어야 하는, 필수 내용이 포함된 코드를 말한다.
  • 일반적으로 수정하지 않아도 동작하는 코드이며, 필요에 따라 이 코드를 바탕으로 수정하여 사용하게 되는 기본 틀을 일컫는다.
  • 생성된 프로젝트 디렉터리 구조는 다음과 같다.

  • package.json 파일에는 프로젝트 관련 메타데이터와 디펜던시 정보가 포함되어 있다.
  • App.test.js에는 간단한 테스트 코드가 들어있다.
  • App.js가 실제 앱 코드이다.
  • 앱을 실행하기 위해서는 다음 명령어를 실행하면 된다.
    • cd first-project
    • npm start
  • 다음과 같은 화면이 나타난다.

  • 앱을 확인하기 위해서는 iOS나 안드로이드용 Expo 앱이 필요하다.
  • Expo client를 설치 후 실행하여 카메라로 이 QR코드를 찍으면 방금 생성한 리액트 네이티브 앱이 스마트폰에서 실행된다.
  • 단, 스마트폰과 컴퓨터가 서로 통신할 수 있도록 같은 네트워크에 접속되어 있어야 한다.

2. 개발 환경 설정: 전형적인 방법

  • 리액트 네이티브 커맨드 라인 도구를 이용하여 앱을 만들 수 있다. 커맨드 라인 도구 설치 방법은 다음과 같다.
  • npm install -g react-native-cli
  • 설치가 완료되면 다음 명령어로 iOS와 안드로이드 보일러플레이트가 포함된 새로운 리액트 네이티브 프로젝트를 생성할 수 있다.
  • react-native init FirstProject
  • 생성된 프로젝트의 디렉터리 구조는 다음과 같다.

  • ios와 android디렉터리에는 각 플랫폼별로 자동 생성된 기본 코드가 있다.
  • 생성된 리액트 네이티브 앱의 실행 시작점에 해당하는 리액트 코드는 index.ios.js와 index.android.js에 들어있다.
  • npm을 통해 설치된 디펜던시는 node_modules에 위치한다.
  • iOS에서 앱을 실행하려면 다음과 같은 명령어를 사용한다.
    • cd FirstProject
    • react-native run-ios
  • 안드로이드에서 앱을 실행하려면 다음과 같은 명령어를 사용한다.
    • react-native run-android

3. 코드 특징

  • 리액트 네이티브에서는 사용하려는 네이티브로 제공되는 모듈을 모두 명시적으로 import해야 한다는 점이다.
  • <div>처럼 바로 사용할 수 있는 것이 아니라 <View>와 <Text> 같은 컴포넌트를 사용하고자 할 때 명시적으로 불러와야 한다.
  • 리액트 네이티브의 모든 스타일은 스타일시트 대신에 스타일 객체를 통해 작성한다.
  • StyleSheet 라이브러리를 활용하여 스타일 객체를 작성하는 것이 표준 방법이다.
  • <Text>컴포넌트에 글자 스타일에 해당하는 fontSize 속성을 지정할 수 있고 레이아웃 방법은 flexbox를 이용하여 지정한다.

4. 날씨 앱 만들기

  • 완성된 앱에는 사용자가 zip코드(우편번호)를 입력할 수 있는 텍스트 필드가 있고 사용자 입력에 따라 OpenWeather Map API를 통해 현재 날씨를 가져오고 화면에 가져온다.
  • 초기 컴포넌트를 WeatherProject.js라는 파일로 분리한다.
  • 사용자가 zip 코드를 입력할 수 있고 입력한 지역의 일기예보를 얻어오도록 만들어야 한다.
  • 먼저 사용자 입력을 받기 위해 텍스트 필드를 추가한다.
  • zip 코드를 컴포넌트의 초기 state로 지정할 수 있다.
  • render함수 이전에 zip 코드 정보를 컴포넌트에 추가한다.

  • 컴포넌트 클래스를 생성할 때, construct함수 안에서 this.state에 값을 할당하여 리액트 컴포넌트의 state초깃값을 지정한다.

 

  • <Text> 컴포넌트 중 하나를 this.state.zip의 내용이 표시되도록 한다.
  • <TextInput> 컴포넌트로 사용자로부터 텍스트 입력을 받을 수 있게 한다.

  • <TextInput>에 onChange나 onFocus 같은 이벤트를 다루는 콜백 함수를 추가할 수 있다.
  • props의 onSubmitEditing은 text가 보내질때마다 불려지는 함수이다.
  • props의 onChangeText는 text가 변화할때마다 불리는 function이다.
  • 데이터 표시를 위해 forecast라는 state를 초기화시켜주고 Forecast.js라는 파일을 별도로 만든다.
  • <Forecast> 컴포넌트는 자신의 props를 기반으로 몇개의 <Text>를 렌더링할 뿐이다.

  • <Forecast> 컴포넌트를 불러오고 이를 render함수에 추가한다.
  • 그리고 this.state.forecast를 props로 컴포넌트에 전달한다.
  • 웹에서 데이터를 가져오기 위해서는 리액트 네이티브가 구현한 Fetch API를 사용한다.
  • 배경이미지를 사용하기 위해서는 <ImageBackground> 컴포넌트를 컨테이너로 사용한다.
  • 전체 코드는 아래 Github에 있다.

https://github.com/KoSangWon/react-native-book/tree/master/first-project

 

KoSangWon/react-native-book

Learning React Native, 2nd Edition Project. Contribute to KoSangWon/react-native-book development by creating an account on GitHub.

github.com

  • 결과화면은 다음과 같다.

'대학교 > FE' 카테고리의 다른 글

[React-Native] (5) 스타일  (0) 2020.03.14
[React-Native] (4) 모바일 컴포넌트  (0) 2020.03.11
[Redux] Redux를 이용한 CRUD  (0) 2020.03.08
[Redux] 시간여행과 로깅  (0) 2020.03.08
[Redux] Redux 적용  (0) 2020.03.08
0 Comments
댓글쓰기 폼