출시·고도화 중
Framework · 2015년 공개
React Native는 React와 JavaScript·TypeScript로 Android·iOS 앱을 만드는 오픈 소스 프레임워크로, 한 코드베이스로 두 플랫폼의 네이티브 화면을 그립니다.
React Native는 Meta가 2015년에 공개한 오픈 소스 프레임워크로, React의 컴포넌트 모델 그대로 Android와 iOS 앱을 만들 수 있게 해 줍니다. 화면은 웹뷰가 아니라 각 플랫폼의 네이티브 뷰로 그려지므로, 사용자는 일반 네이티브 앱과 같은 모양과 반응을 경험합니다. 지금은 Meta와 커뮤니티, 여러 기업이 함께 개발하며, 기본으로 쓰는 New Architecture가 JavaScript와 네이티브 코드를 더 직접적으로 연결합니다.
React Native는 웹에서 React를 쓰던 팀이 같은 지식과 도구로 모바일 앱을 만들 때 특히 강점이 있습니다. 하나의 코드베이스로 두 플랫폼을 함께 개발하면서도 필요한 부분은 Kotlin·Swift 네이티브 코드로 확장할 수 있고, Fast Refresh로 코드를 저장하는 즉시 결과를 확인할 수 있습니다. 커머스·소셜·사내 업무 앱처럼 화면이 많고 출시 주기가 빠른 앱에서 널리 쓰이며, 기존 네이티브 앱의 일부 화면에만 넣는 방식도 가능합니다.
처음 시작한다면 공식 문서가 권장하는 대로 Expo로 프로젝트를 만드는 것이 가장 쉽습니다. Node.js를 설치하고 create-expo-app으로 프로젝트를 만든 뒤, 휴대폰에 Expo Go를 설치해 QR 코드로 바로 실행해 볼 수 있습니다. React 기초를 먼저 익히고, 공식 문서의 코어 컴포넌트 설명과 Expo 튜토리얼을 따라 작은 앱을 직접 만들어 보기를 권합니다.
View, Text, Image 같은 컴포넌트가 각 플랫폼의 네이티브 뷰로 그려져, 플랫폼다운 모양과 반응을 냅니다.
컴포넌트, props, 상태, 훅 같은 React의 개념과 TypeScript·npm 생태계를 그대로 씁니다.
Fast Refresh가 상태를 유지한 채 바뀐 코드만 반영하고, React Native DevTools로 디버깅합니다.
New Architecture의 Turbo Native Module과 Fabric 컴포넌트로 Kotlin·Swift 코드를 직접 연결할 수 있습니다.
React Native 도구는 Node.js에서 동작합니다. nodejs.org에서 LTS 버전을 설치하고 버전이 표시되는지 확인합니다. Android 에뮬레이터에는 Android Studio가, iOS 시뮬레이터에는 macOS와 Xcode가 필요합니다.
node --version공식 문서가 권장하는 Expo로 새 프로젝트를 만듭니다. TypeScript와 파일 기반 라우팅(Expo Router)이 설정된 템플릿이 만들어집니다.
npx create-expo-app@latest my-app프로젝트 폴더에서 개발 서버를 실행한 뒤, 휴대폰의 Expo Go로 QR 코드를 찍거나 터미널에서 a(Android) 또는 i(iOS)를 눌러 앱을 엽니다.
cd my-app && npx expo startblank-typescript 템플릿으로 만든 프로젝트에서 App.tsx는 앱의 루트 컴포넌트입니다. View는 레이아웃 상자, Text는 글자를 표시하는 코어 컴포넌트이며, 모든 글자는 Text 안에 있어야 합니다. StyleSheet.create로 만든 스타일은 Flexbox로 내용을 화면 가운데에 놓습니다. 코드를 고치고 저장하면 Fast Refresh가 실행 중인 앱에 바로 반영합니다.
App.tsx
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text>Hello, world!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, alignItems: "center", justifyContent: "center" },
});
npx create-expo-app@latest hello --template blank-typescript && cd hello && npx expo start설치부터 React Native 의 핵심 개념까지, 여섯 장으로 차근차근 따라 합니다.
React Native 에 관해 묻고, 경험을 나누고, 의견을 주고받는 곳입니다.
아직 토론이 없습니다. 첫 이야기를 시작해 보세요.
댓글 0개
로그인 · 로그인하면 댓글을 남길 수 있습니다.
첫 댓글을 남겨 보세요.