리액트 네이티브(React Native)란?
자바스크립트(JavaScript)와 리액트(React) 라이브러리를 사용해 네이티브 앱을 개발할 수 있게 해주는 기술이다.
리액트 네이티브의 장점은 자바스크립트로 코드를 작성해 애플의 IOS 기기와 구글의 안드로이드 기기에서도 구동하는 애플리케이션을 개발할 수 있다는 것이다.(IOS 앱을 개발하려면 macOS를 사용해야한다. 다른 운영 체제에서는 IOS 앱을 컴파일할 수 없기 때문에 리액트 네이티브로 개발할 때는 macOS기기를 사용하는 것이 좋다.)
리액트는 웹 애플리케이션의 UI를 편하게 만들기 위해 페이스북에서 개발한 자바스크립트 라이브러리이다.
리액트는 웹 개발을 위해 만들어진 라이브러리지만, 플랫폼에 구속을 받지 않는다. 리액트에서 실제 웹에 해당하는 HTML과 DOM에 관련한 기능들은 별개의 라이브러러인 리액트돔에 들어있다. 따라서 웹 프로젝트에 리액트를 사용할 때는 리액트와 리액트돔을 함께 사용한다.
리액트 네이티브를 사용하면 리액트에서 사용하는 기술을 웹 브라우저가 아닌 환경에서도 사용할 수 있다.
(자바스크립트로 IOS, 안드로이드 환경에서 구동하는 애플리케이션을 만들 수 있다.)
리액트 네이티브를 사용해 만든 프로젝트에는 JavaScriptCore라는 자바스크립트 엔진이 탑재되어 있다.
이 자바스크립트 엔진을 통해 작성하는 모든 자바스크립트 로직을 앱 내에서 실행해준다.
리액트 네이티브에는 수많은 컴포넌트(재사용 가능한 유저 인터페이스 블록)가 내장되어 있다. 컴포넌트를 사용할 때는 자바스크립트 형식의 파일에 페이스북에 만든 JSX 문법을 사용해 코드를 작성한다. JSX로 코드를 작성하면 리액트 네이티브로 만든 앱 안에 내장된 스레드에서 이를 인식해 어떤 네이티브 컴포넌트를 보여줘야 할지 연산한 다음 UI를 화면에 보여준다.
릴리스하기 전에 실제 기기에서 한번 테스트해보는 것이 좋다. 시뮬레이터에서는 제대로 작동하는데 실제 기기에서는 제대로 작동하지 않는 상황이 발생할 수 있기 때문이다.
실제 기기를 사용하면 개발하는 과정에서 컴퓨터 자원을 덜 사용할 수 있다는 이점도 있기에 IOS와 안드로이드 실제 기기를 하나씩 보유하고 있으면 좋다.
Node.js
웹 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 해주는 Chrome V8 JavaScript 엔진으로 빌드된 런타임이다. 이를 통해 리액트 네이티브로 개발할 때 필요한 도구들을 사용할 수 있다.
npm
자바스크립트 프로젝트를 위한 패키지를 관리하는 도구이다.
npm은 Node.js를 설치할 때 자동으로 함께 설치된다. (Node.js 버전은 LTS버전을 사용한다.)
LTS(Long Term Support)버전 : 장기 지원되는 버전을 의미한다. 일반 버전과 달리 안정성에 중점을 둔 버전으로, 기능 업데이트는 최소한으로 이루어지거나 아예 없는 반면 보안 업데이트의 지원 기간이 일반 버전보다 훨씬 길다.
npm(Node Package Manager) : Node.js의 패키지를 관리할 수 있는 도구이다. 또한 npm을 사용하여 패키지를 공유하는 온라인 패키지 저장소의 이름이기도 하다.
nvm(Node Version Manager) : Node.js의 버전을 관리하는 도구이다. 협업, 여러가지 프로젝트를 동시에 진행해야 할때와 라이브러리 버전 호환 문제에 유용하게 사용할 수 있다.
npx는 Node.js와 함께 설치되는 도구로, Node.js 환경에서 구동되는 CLI 도구들을 간단하게 사용할 수 있게 해준다.
CLI 는 Command-Line Interface 또는 Character User Interface이다. (명령줄 인터페이스)
번들링
번들링이란 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업을 뜻한다. 모듈(module)이란 분리된 파일이다.
번들링 도구에는 RequireJS, Browserify, Rollup, Parcel 등이 있다. 많이 쓰이는 것은 Webpack이다. (성능이 우수하다.)
모듈화 작업을 하는 방식에는 CommonJS, AMD, UMD, ES6 모듈 등같은 모듈 명세들이 다양하게 존재한다. 웹팩은 이 모두를 지원해준다. 그리고 파일 분할 기능이 있어서 원하는 코드만 따로 분리해서 압축하는 것도 가능하다. 또한 CSS 로더의 기능과 리액트의 JSX 변환 작업도 해주기 때문에 모던 자바스크립트 개발을 할 때 상당히 유용하다.
이런 장점 때문에 크고 복잡하며 다양한 리소스들이 존재하는 프로젝트에는 웹 팩을 사용하는 것이 좋다.
반면 Grunt와 Gulp는 의존성에 대한 개념이 없으며 오로지 리소스들에 대한 툴로 사용된다.
Brwosify는 웹팩과 비슷한 도구지만 속도면에서는 웹팩보다 조금 떨어진다.
yarn
리액트와 리액트 네이티브처럼 페이스북에서 만든 도구이다.
yarn은 npm과 같은 패키지 관리 도구로 npm과 역할이 동일하지만, 성능이 개선되어서 npm보다 패키지를 더 빨리 설치한다. yarn은 모든 운영체제에서 다음 명령어로 설치한다.
$ npm install --global yarn
Chocolatey
Window용 패키지 관리자로 윈도우에서는 Chocolatey 패키지 매니저를 사용할 것을 권장한다.
Chocolatey설치방법은 Powershell(관리자 권한)으로 실행한 후 다음 명령어를 입력한다.
> Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
Chocolatey를 설치한 뒤 다음 명령어를 통해 JDK를 설치한다.
> choco install -y openjdk11
설치가 끝나면 Powershell을 종료하고 다시 열어 다음 명령어를 실행한다.
> javac -version
javac 11.0.16.1 이 나오면 설치가 성공한 것이다.
Android Studio
안드로이드 앱을 만들기 위해서는 안드로이드 스튜디오를 설치해야 한다. 설치 방법은 모든 운영체제가 동일하다.
안드로이드 환경에서 리액트 네이티브 앱 구동 : 애플리케이션을 빌드해 실제 기기에서 구동할 수도 있고, 안드로이드 시뮬레이터에서 구동할 수도 있다.
AVD Manager는 안드로이드 시뮬레이터를 관리하는 도구이다.
윈도우에서 환경 변수 설정하기
제어판 > 시스템 및 보안 > 시스템 > 고급 시스템 설정 > 환경 변수 창 > 새로 만들기 버튼 클릭 후 ANDROID_HOME 변수를 설정한다. SDK의 기본 설치 경로는 다음과 같다.
C:\Users\계정명\AppData\Local\Android\Sdk
VS Code
VS Code(Visual Studio Code)는 마이크로소프트(Microsoft)에서 만든 코드 에디터이다.
(VS Code 외에 Atom, Sublime, Webstorm 등이 있다.)
VS Code 내부에 터미널 띄우기(Ctrl + `(백틱) 또는 상단 메뉴에서 View > Terminal 선택) → 현재 디렉터리에서 바로 터미널을 띄울 수 있어 편하다.
Xcode와 CocoaPods
Xcode와 CocoaPods는 IOS 프로젝트를 만들기 위해 설치하는 도구이다.
Xcode는 앱스토어에서 설치하거나 https://bit.ly/install-xcode 로 접속해서 설치해도 된다.
Xcode를 설치한 후에는 CocoaPods를 설치한다. CocoaPods는 터미널에서 다음 명령어를 입력해 설치 한다.
$ sudo gem install cocoapods
yarn
스크립트 설정되면 yarn을 통해 원하는 명령어를 실행할 수 있다.
$ yarn <스크립트 이름>
<스크립트 이름>에 ios, android, start를 넣으면 된다.
- ios : IOS 환경에서 앱을 구동하는 스크립트
- android : 안드로이드 환경에서 앱을 구동하는 스크립트
- start : Metro를 구동하는 스크립트
android나 ios 스크립트를 사용하면 새로운 터미널에서 start 스크립트가 자동으로 시작되기 때문에 start 스크립트를 직접 입력해 실행하는 일은 드물다.
Metro는 리액트 네이티브를 위한 자바스크립트 번들러로, 프로젝트에 사용된 자바스크립트 파일들을 모두 읽어서 올바른 순서로 하나의 파일로 합쳐주고 네이티브 앱에서 실행할 준비를 해준다.
(책)
// index.js
/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
index.js 파일은 프로젝트의 엔트리 파일이다. 생성한 리액트 네이티브 앱은 이 파일에서 시작한다. 여기서 import 구문을 통해 코드들을 불러와 앱을 번들링한다.
코드 최상단 주석의 @format이라는 키워드는 코드 스타일을 자동으로 정리해주는 Prettier라는 도구와 관련되어 있다. Prettier를 사용할 때 --require-pragma라는 명령어 옵션을 설정하면 해당 키워드가 존재하는 파일만 처리한다.
앞의 코드는 App이라는 컴포넌트를 불러와서 AppRegistry.registerComponent라는 함수를 사용해 네이티브 시스템에 해당 컴포넌트를 등록한다. 이 작업을 해줘야 네이티브 시스템에서 내가 만든 리액트 네이티브 컴포넌트를 화면에 보여줄 수 있다.
// App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
const App: () => React$Node = () => {
return (
(...)
);
};
const styles = StyleSheet.create({
(...)
});
export default App;
상단의 @flow라는 키워드는 이 자바스크립트 파일을 Flow라는 정적 타입 분석기로 검사하겠다는 의미이다. 리액트 네이티브 프로젝트를 만들면 이렇게 기본적으로 Flow가 적용되어 있다. 자바스크립트 언어는 기본적으로 동적 타입 시스템을 가지고 있다. 동적 타입 시스템에서는 변수를 선언할 때 사전에 타입을 지정하지 않아도 값을 할당할 때 자동으로 지정해준다. 즉, 다음과 같이 숫자였던 변수에 문자열을 담을 수도 있고, 객체를 담을 수도 있다.
let a = 1;
a = 'hello';
a = { foo: 'bar' }
Flow를 사용하면 자바스크립트에서 정적 타입 시스템을 사용할 수 있다. 정적 타입 시스템에서는 다음 코드와 같이 변수, 파라미터, 함수의 반환값 등에 타입을 사전에 지정해 코드를 작성한다.
// @flow
function square(n: number): number {
return n * n;
}
square("2"); // Error!
이 코드에서는 square라는 함수에서 n이라는 파라미터를 숫자 타입으로 받아와서 숫자 타입의 값을 반환한다고 설정했다. 그리고 이 함수에 숫자가 아닌 문자열을 넣으면 에디터 단에서 에러를 감지할 수 있다.
Flow를 사용하면 개발하면서 실수한 것들을 런타임이 아닌 개발 단계에서 바로바로 확인할 수 있다는 큰 장점이 있다. Flow는 충분히 좋은 도구지만 Flow를 사용하는 것을 권장하지 않는다. 그 대신 타입스크립트(TypeScript)를 사용한다.
타입스크립트는 Flow보다 인지도가 훨씬 높고 더욱 큰 커뮤니티를 가지고 있다. 뿐만 아니라 IDE 지원이 아주 훌륭하다. 반면 Flow는 인지도가 낮고, VS Code에서는 IDE 지원이 제대로 되지 않아서 느리기도 하고 불편하다.
Flow를 사용하지 않을 것이므로, App.js 파일에서 Flow를 비활성화한다. 방법은 간단하다. 파일 최상단의 @flow를 지우고, App 컴포넌트를 선언하는 부분을 다음과 같이 변경한다.
// 변경 전
const App: () => React$Node = () => {
// 변경 후
const App = () => {
이제 App 컴포넌트의 코드들을 살펴본다.
import React from 'react';
맨 위에는 React를 불러오는 코드가 있다. 리액트 컴포넌트를 만들 때는 이 코드를 꼭 넣어줘야 한다.
다음에는 react-native 패키지를 불러오는 코드가 있다.
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar } from 'react-native';
여기에 있는 SafeAreaView, ScrollView, View, Text, StatusBar는 리액트 네이티브에 내장된, 특별한 컴포넌트들이다. StyleSheet는 컴포넌트를 스타일링해주는 API이다. 코드 하단부를 보면 이를 사용해 스타일을 설정하고 있다.
세 번째 import 구문에서는 react-native/Libraries/NewAppScreen에서 다양한 컴포넌트를 불러오고 있는데, 이는 초기 화면에서 보여주는 도움말에 관련한 컴포넌트이므로 무시해도 상관없다.
import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions } from 'react-native/Libraries/NewAppScreen';
다음에는 App 컴포넌트를 선언하는 코드가 있다.
const App = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
(...)
</SafeAreaView>
</>
);
};
<StatusBar />, <SafeAreaView>...</SafeAreaView>와 같이 XML 형태로 작성된 코드를 JSX라고 부른다.
(JSX(JavaScriptXML) : JavaScript에 XML을 추가한 확장 문법이다.)
코드 최하단에는 컴포넌트를 내보내는 코드가 있다.
export default App;
이렇게 컴포넌트를 내보내면 다른 파일(지금은 index.js)에서 불러와서 사용할 수 있다.
이 App이라는 컴포넌트를 수정해본다. 기존에 보여준 도움말과 스타일 관련 코드는 모두 다 지우고 다음과 같이 코드를 작성한다.
// App.js
import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';
const App = () => {
return (
<SafeAreaView>
<View>
<Text>Hello React!</Text>
</View>
</SafeAreaView>
);
};
export default App;
코드를 저장하면 시뮬레이터에 바로 반영된다. 시뮬레이터를 확인해보면 Hello React!가 보인다.
네이티브 프로젝트
각 환경을 위한 네이티브 프로젝트 디렉터리는 ios와 android 디렉터리에 위치한다. ios 디렉터리는 Xcode로 열 수 있고, android 디렉터리는 안드로이드 스튜디오로 열 수 있다.
ESLint와 Prettier
자바스크립트 코드를 작성할 때 개발자 취향에 따라 다르게 사용하는 코드 규칙들이 있다. 예를 들어, 들여쓰기할 때 탭을 쓸지, 스페이스를 쓸지, 또 스페이스를 쓴다면 몇 칸을 쓸지 딱 정해진 규칙이 없다. 그리고 코드 뒷부분에 세미콜론(;)을 사용해도 되고, 사용하지 않아도 된다. 문자열을 입력할 때 큰따옴표(")를 사용해도 되고 작은따옴표(')를 사용해도 된다. 또한, 자바스크립트는 컴파일해서 사용하는 언어가 아니다 보니 선언되지 않은 함수나 값을 사용할 때 에디터에서 따로 오류가 발생하지 않는다.
이때 자바스크립트의 코드 규칙을 일관성 있게 작성하고, 잠재적인 코드 실수를 방지하는 도구가 있는데, 바로 ESLint이다. ESLint는 사전에 정해진 규칙 및 잠재적인 실수가 발견되면 경고 또는 오류를 보여준다. Prettier라는 도구도 있다. 들여쓰기, 세미콜론, 따옴표 등의 규칙을 한번에 정리해준다.
이 도구들은 VS Code에서 확장 프로그램으로 연동해 사용할 수 있다. VS Code 좌측의 최하단 아이콘을 누르고 ESLint와 Prettier를 검색해 맨 위에 나타나는 확장 프로그램을 설치한다.
두 확장 프로그램을 설치한 뒤 App.js 파일을 열어 본다. 우측 하단에 ESLint가 보일 것이다. 현재는 비활성화 상태이므로 해당 부분을 누른다.
ESLint를 이 디렉터리에서 활성화할지, 모든 디렉터리에서 활성화할지 물어보면 맨 위의 Allow Everywhere를 눌러 모든 디렉터리에서 활성화한다.
그러고 나서 const App 부분의 들여쓰기를 이상하게 만들어 보면 화면 하단의 PROBLEMS에 오류가 나타난다(PROBLEMS가 보이지 않으면 VS Code의 View > Problems에서 열 수 있다). 이런 오류가 나타나면 오류의 내용대로 고쳐주면 된다.
ESLint는 자바스크립트 문법상 오류가 있을 때도 오류를 보여준다. 문법상 오류는 직접 고쳐야 하지만, 들여쓰기와 같은 코드 스타일 오류는 Prettier를 사용해 자동으로 고칠 수 있다.
방금 이상하게 들여쓰기해 오류가 나타난 상황에서 F1을 누르고 Format Document를 입력하면 어떤 도구를 사용해 Format을 진행할 것인지 물어보는 창이 나타난다.
Configure 버튼을 누르고 Prettier를 선택하면 코드가 자동으로 정리된다. 이 작업을 항상 수행하는 방법이 두 가지가 있는데, 매번 단축키를 눌러서 코드를 정리하는 방법과 코드를 저장할 때 자동으로 정리시키는 방법이다.
먼저 단축키는 F1을 누르고 Format Document를 입력하면 항목 우측에 단축키가 있다. 그런데 매번 단축키로 코드를 정리하는 것은 번거로울 수 있다. 아예 저장할 때마다 코드를 자동으로 정리하도록 만들면 코드 스타일에 대해서 신경 쓰지 않고 코드를 작성할 수 있다.
저장할 때 자동 코드 정리 기능을 활성화하려면 Code(윈도우 / 리눅스에서는 File) > Preferences > Settings 메뉴 항목을 선택하고, Search Settings 부분에서 Format On Save를 입력해 설정 항목을 검색하고 해당 항목을 체크한다.
이 설정을 활성화하면 저장할 때마다 코드를 자동으로 정리할 것이다.
'Framework | Library > React Native' 카테고리의 다른 글
[React Native] error: Command failed with exit code 1. (0) | 2022.09.30 |
---|---|
[React Native] 공부(component, Props, defaultProps, JSX 문법, 주석) (0) | 2022.09.29 |
[React Native] Delete 'CR' eslint(prettier/prettier) (1) | 2022.09.29 |