리액트 네이티브란

dev bourgeois·2024년 5월 1일

React-Native Study

목록 보기

1/5

리액트 네이티브란?

React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크이다.

사용자 인터페이스(UI)를 구축하기 위한 Facebook의 JavaScript 라이브러리인 React를 기반으로 하지만 React는 브라우저를 대상으로 하고 React Native는 모바일 플랫폼을 대상으로 한다.

그래서 웹 개발자도 JavaScript를 이용해서 "네이티브" 모양과 느낌을 주는 모바일 애플리케이션을 작성할 수 있다.

또한 작성하는 대부분의 코드를 플랫폼 간에 공유할 수 있기 때문에 React Native를 사용하면 Android와 iOS 모두에서 동시에 쉽게 개발할 수 있다.

리액트 네이티브의 장점

(1)
WebView를 사용하는 다른 크로스 플랫폼(Cordova, Ionic 등)과는 다르게 실제 호스트 플랫폼의 표준 렌더링 API를 사용해서 렌더링한다.

➡️ WebView를 사용하면 성능상의 문제와 Native에서 사용하는 기본 UI 요소나 애니메이션을 Javascript, HTML 및 CSS 조합으로 모방하려고 하기에 한계가 있다.
➡️ React Native는 마크업 요소를 실제 네이티브 요소로 변환해서 사용한다.

(2)
리액트 네이티브는 리액트와 마찬가지로 state과 props가 변경되면 React Native의 뷰를 다시 렌더링 하는 것과 같이 React 사용하는 것과 대부분이 비슷하기에 React를 사용하는 웹 개발자라면 손쉽게 앱 개발을 할 수 있게 만들어 준다.

React Native와 React의 주요 차이점은 React Native가 HTML 및 CSS 마크업을 사용하는 대신 호스트 플랫폼의 UI 라이브러리를 활용하여 이를 수행한다는 것이다.

(3)
크로스 플랫폼이란 이름과 같이 대부분의 비슷한 소스 코드로 IOS와 Android 모두를 위한 앱 개발을 할 수가 있다. 이렇게 해서 많은 시간과 비용을 절약해서 앱을 만들수 있다.

Core Components, Native Components

React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크

Native Components

Android 개발에서는 Kotlin 또는 Java로 View를 작성한다.
iOS 개발에서는 Swift 또는 Objective-C를 사용한다.

React Native를 사용하면 React Component를 사용하여 JavaScript로 이러한 View를 호출할 수 있다.
런타임 시 React Native는 해당 구성 요소에 해당하는 Android 및 iOS View를 생성한다.

React Native 구성 요소는 Android 및 iOS와 동일한 보기에서 지원되기 때문에
React Native 앱은 다른 앱과 같은 모양, 느낌 및 성능을 제공합니다. 이러한 플랫폼 지원 구성 요소를 Native Components 라고 한다.

Core Components

Native Components는 누구나 각자 원하는 바에 맞게 만들 수 있다.
Core Component는 리액트에서 기본 제공하는 Native Components이다.

리액트 네이티브를 사용하기 위한 개발환경

리액트 네이티브를 이용할 때 개발 환경을 세팅하는 방법은 대표적으로 두가지가 있다.

리액트 네이티브 설치를 위해서 필요한 것들

Node.js
Node.js란 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로서, 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산 할 수 있다.

React 설치 시 Node.js가 필요한 이유

리액트 앱은 웹 브라우저에서 실행되는 코드여서 Node.js와 직접적인 연관은 없지만,
프로젝트를 개발하는 데 주요 도구들이 Node.js를 사용하기 때문에 필요하다.
이때 사용하는 개발 도구는 바벨, 모듈화된 코드를 한 파일로 합치고 코드를 수정할 때 마다 웹 브라우저를 리로딩하는 등 여러기능을 지닌 웹팩등이 있다.

Visual Studio Code
비주얼 스튜디오 코드Visual Studio Code는 마이크로소프트Microsoft에서 오픈소스로 개발하고 있는 소스 코드 에디터이다. 웹 기반으로 기술들로 데스크톱 애플리케이션을 만들 수 있는 깃허브GitHub의 일렉트론Electron을 기반으로 만들어져 맥OSmacOS, 리눅스Linux, 윈도우Windows 등 메이저 운영체제를 모두 지원하고 있다. 마이크로소프트의 통합 개발 환경(IDE) 비주얼 스튜디오Visual Studio와 이름이 비슷하지만 따로 개발되고 있으며 IDE보다는 코드 에디터에 가깝다. MIT 라이센스로 오픈소스로 공개되어 있으며, 무료로 사용할 수 있다.

개발환경 세팅하기(Expo)

npx create-expo-app AwesomeProject

Expo로 생성한 리액트 네이티브 앱 구조 살펴보기

Babel

최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌수 있게 변환 시켜주는 라이브러리

// Babel Input: ES6(ES2015) arrow function
[1, 2, 3].map((n) => n + 1);


// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});