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

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

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