[React Native] React Native에 대해 알아보기

React Native에 대해 알아보기

 

Learn once, write anywhere.

리액트 네이티브의 슬로건은 "한 번 배우면 어디서든 쓸 수 있다(Learn once, write anywhere)"입니다. 이 말이 의미하는 바가 무엇인지, 그리고 실제로 리액트 네이티브를 어디에서 어떻게 활용할 수 있는지 알아보겠습니다.

React Native

리액트 네이티브는 리액트의 강점을 네이티브 개발로 확장하여, 리액트를 아는 개발자들이 쉽게 네이티브 앱을 만들 수 있게 도와줍니다. 또한, 네이티브 개발자들은 React Native를 통해 공통 기능을 한 번만 작성함으로써 다양한 네이티브 플랫폼 간의 기능을 일관되게 유지할 수 있습니다.

리액트 네이티브는 자바스크립트로 작성되며, 네이티브 코드로 변환되어 렌더링 됩니다. 리액트의 기본 빌딩 블록인 "프리미티브(Primitives)"는 네이티브 플랫폼의 UI로 렌더링 되므로, 네이티브 앱과 동일한 플랫폼 API를 사용할 수 있습니다.

"React primitives"는 React 요소(Element), 컴포넌트(Component), 그리고 React Hooks와 같은 기본적인 구성요소를 포함합니다. 일반적으로, 이러한 프리미티브들은 React 애플리케이션을 구성하고, 상태 관리, 라이프사이클 관리, 그리고 UI 렌더링을 가능하게 하는 핵심 요소들입니다.

리액트 네이티브를 사용해 네이티브 앱을 만들 수 있으며, 사용자 경험을 손상시키지 않습니다. 각 플랫폼의 네이티브 UI 빌딩 블록에 직접 매핑되는 View, Text, Image와 같은 플랫폼에 구애받지 않는 핵심 컴포넌트들이 있기 때문입니다.

리액트 네이티브는 안드로이드와 iOS와 같은 플랫폼에 리액트 프로그래밍 패러다임을 제공합니다. 라우팅을 수행하는 방법이나 수많은 플랫폼 API에 각각 액세스 하는 방법을 규정하지는 않습니다. 

프레임워크 없이도 React Native를 사용할 수 있지만, Expo와 같은 React Native 프레임워크를 사용하면 초기 앱 개발이 훨씬 단순해집니다. Expo Go 앱을 활용하면 기기에 관계없이 프로젝트를 바로 실행할 수 있습니다. 새로운 앱을 개발할 때는 expo와 같은 리액트 네이티브 프레임워크를 사용하는 것이 권장됩니다. 이를 통해 개발 속도를 높일 수 있으며, 이미 검증된 솔루션을 제공받을 수 있습니다. 반면, 프레임워크 없이 개발할 경우 환경 설정과 문제 해결에 많은 시간을 소모할 수 있습니다. 이 내용은 공식 홈페이지에서도 확인할 수 있습니다.

https://reactnative.dev/docs/environment-setup

Expo

Expo는 프로덕션급 React 네이티브 프레임워크입니다. Expo는 파일 기반 라우팅, 네이티브 모듈의 표준 라이브러리 등 앱을 더 쉽게 개발할 수 있는 개발자 도구를 제공합니다.

엑스포의 프레임워크는 무료 오픈 소스이며, GitHub와 Discord에서 활발한 커뮤니티가 운영되고 있습니다. 엑스포 팀은 메타의 리액트 네이티브 팀과 긴밀히 협력하여 최신 리액트 네이티브 기능을 엑스포 SDK에 제공하고 있습니다.

또한 엑스포 팀은 개발 프로세스의 각 단계에서 프레임워크인 엑스포를 보완하는 엑스포 애플리케이션 서비스(EAS)도 제공하고 있습니다.

Native Components

Android 개발에서는 Kotlin 또는 Java로 뷰를 작성하고, iOS 개발에서는 Swift 또는 Objective-C를 사용합니다. React Native를 사용하면 React 컴포넌트를 사용하여 자바스크립트로 이러한 뷰를 호출할 수 있습니다. 런타임에 React Native는 해당 컴포넌트에 해당하는 Android 및 iOS 뷰를 생성합니다. 리액트 네이티브 컴포넌트는 안드로이드 및 iOS와 동일한 뷰로 지원되기 때문에 리액트 네이티브 앱은 다른 앱과 같은 모양, 느낌 및 성능을 갖습니다. 우리는 이러한 플랫폼 지원 컴포넌트를 네이티브 컴포넌트라고 부릅니다.

리액트 네이티브는 앱 개발을 즉시 시작할 수 있게 해주는 필수적이고 사용 준비가 된 네이티브 컴포넌트 세트를 제공합니다. 이것이 리액트 네이티브의 핵심 컴포넌트입니다.

React Native의 핵심 컴포넌트(Core Components)는 모바일 앱을 구축할 때 사용할 수 있는 기본적인 UI 요소들을 말합니다. 이 컴포넌트들은 네이티브 플랫폼의 API와 직접 연동되어 iOS나 Android 등의 운영 체제에서 네이티브 앱의 성능과 외관을 제공합니다. 예를 들어, View, Text, Image, ScrollView, TextInput 등이 이에 해당합니다.

이 컴포넌트들은 개발자가 추가적인 설정 없이도 즉시 사용할 수 있으며, 앱의 구성 요소로서 기능합니다. React Native는 이러한 컴포넌트들을 통해 웹 개발자도 쉽게 모바일 앱 개발에 접근할 수 있도록 도와주며, JavaScript를 사용하여 이 컴포넌트들을 조작하고 확장할 수 있습니다.

핵심 컴포넌트를 사용하는 것은 리액트 네이티브의 강력한 장점 중 하나로, 개발자는 이를 통해 빠르게 모바일 애플리케이션을 제작하고, 필요에 따라 네이티브 코드를 추가하여 기능을 확장할 수 있습니다. 이 컴포넌트들은 앱의 성능을 최적화하고, 네이티브 사용자 경험을 제공하는 데 중요한 역할을 합니다.

Core Components

주로 사용하는 핵심 컴포넌트는 다음과 같습니다.

리액트 네이티브가 리액트 컴포넌트와 동일한 API 구조를 사용하기 때문에, 먼저 리액트 컴포넌트 API에 대해 알아야 합니다. 

리액트 컴포넌트 API 구조란 리액트에서 컴포넌트를 정의하고 관리하는 데 사용되는 일련의 규칙과 기능을 말합니다. 이 구조는 컴포넌트의 생성, 상태 관리, 속성 전달, 그리고 생명주기 관리 등을 포함합니다.

 

이상으로 리액트 네이티브의 기본 개념에 대해 알아보았습니다. 다음에는 Expo에 대해서 좀 더 자세히 알아보겠습니다.