React Native으로 마이그레이션 하기

walgoo·2025년 3월 3일

React Native

목록 보기

2/2

서론

공고를 보다보면 상당히 많은 기업에서 React Native를 요구하는 것을 볼 수 있다. 지금까지 나에게 RN은 '하나의 코드로 앱 환경까지 구축할 수 있는 편리함'으로 인식되었기 때문에 진행 중인 토이 프로젝트를 마이그레이션 해보며 직접 익혀보려고 한다.

1. React Native 환경 설정

React Native CLI 또는 Expo 중 선택해야한다고 한다.

Expo

설정이 간단하고 빠르게 시작할 수 있지만, 네이티브 모듈 사용에 제한이 있을 수 있다.

React Native CLI

네이티브 코드 수정이 가능하지만 설정이 복잡할 수 있다.
➝ 만약 네이티브 모듈을 직접 다룰 필요가 없다면 Expo를 사용하는 것이 더 편리하다.

설치 명령어

npx create-expo-app my-app
cd my-app
npm start

선택한 환경 설정: Expo

React Native를 처음 다뤄보기 때문에 기존 프로젝트처럼 Next.js의 빠른 개발 환경과 비슷하게 개발할 수 있는 Expo를 선택했다. 그리고 Expo는 React 19 지원을 빠르게 따라가며, 최신 React Native 기능을 쉽게 사용 할 수 있다는 장점이 있다.

초기 화면

여기서 app/(tabs)/index.tsx를 수정하라고 나오는 걸 보면, 이 프로젝트는 app/ 폴더 기반의 자동 라우팅을 사용하고 있기 때문에 그에 맞춰서 진행을 하겠다.
Expo v49 이상에서는 app/ 폴더를 사용하면 App.tsx 없이도 프로젝트가 실행된다고 한다.

추가로, 모바일로 개발환경을 실시간으로 모니터링 확인하고 싶으면 Expo Go라는 어플을 설치하면 된다.

2. React Native 이해하기

기본 컴포넌트

웹에서 div → React Native에선 View
웹에서 p → React Native에선 Text
웹에서 button → React Native에선 TouchableOpacity 또는 Pressable

스타일 적용 (Tailwind 대신 React Native 스타일)

React Native는 CSS가 아니라 StyleSheet API를 사용한다.

현재 프로젝트에서는 Tailwind CSS를 사용하고 있었는데, NativeWind 라이브러리를 사용하면 별도의 StyleSheet 없이 Tailwind처럼 사용할 수 있다고 해서 그렇게 적용하기로 했다.

공식 문서
https://www.nativewind.dev/

주의 사항으로 nativewind는 tailwindcss 3.3.2 이상 버전에서는 동작하지 않는다고 한다.

설치 명령어

npm install nativewind
npm install --save-dev tailwindcss@3.3.2

Next.js의 pages 개념은 React Native에 없고, react-navigation 라이브러리를 사용해서 직접 설정해야한다.

설치 명령어

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

3. React Native의 폴더 구조

Next.js는 SSR(서버 사이드 렌더링) 기반이지만, React Native는 클라이언트에서 실행되는 네이티브 앱이다.

Next.js의 기본 폴더 구조

next-project/
├── public/              # 정적 파일 (이미지, 폰트, favicon 등)
├── pages/               # 라우팅을 담당하는 페이지 폴더 (기본적으로 Next.js가 자동으로 라우트 설정)
│   ├── index.tsx        # 홈페이지 ("/")
│   ├── about.tsx        # "/about" 페이지
│   ├── api/             # API 라우트 (Next.js에서 제공하는 서버리스 API 기능)
├── components/          # 재사용 가능한 React 컴포넌트
├── styles/              # CSS 또는 Tailwind 설정
├── utils/               # 유틸리티 함수
├── hooks/               # 커스텀 훅 저장 폴더
├── context/             # 글로벌 상태 관리를 위한 Context API 폴더
├── next.config.js       # Next.js 설정 파일
├── tailwind.config.js   # Tailwind CSS 설정
└── tsconfig.json        # TypeScript 설정

특징

pages/ 폴더를 기반으로 파일 시스템 라우팅 제공
api/ 폴더에서 서버리스 API 제공 가능
public/ 폴더를 사용하여 정적 파일 (이미지 등) 관리
next.config.js에서 웹팩 설정 변경 가능

React Native 기본 폴더 구조 (Expo 기준)

rn-project/
├── assets/              # 이미지, 폰트 등 정적 파일 저장
├── components/          # 재사용 가능한 React Native 컴포넌트
├── screens/             # 개별 페이지 역할을 하는 폴더 (Next.js의 pages/와 비슷)
│   ├── LandingPage.tsx  # 랜딩 페이지 (Next.js의 pages/index.tsx에 해당)
│   ├── UsernameScreen.tsx # 다른 페이지
├── navigation/          # 네비게이션 관리 (React Navigation 설정)
│   ├── StackNavigator.tsx # Stack Navigation 설정
├── hooks/               # 커스텀 훅 저장 폴더 (Next.js와 동일)
├── utils/               # 유틸리티 함수 저장
├── App.tsx              # 앱의 엔트리 포인트 (Next.js의 _app.tsx와 유사)
├── babel.config.js      # Babel 설정 파일 (Tailwind 적용 시 필요)
├── tailwind.config.js   # Tailwind CSS(NativeWind) 설정
└── tsconfig.json        # TypeScript 설정