React 프로젝트 React Native로 확장하기

React → React Native

구성 요소	재사용 가능 여부	설명
비즈니스 로직 (hooks, Zustand 등)	✅ 거의 그대로 사용 가능	웹/앱 공통 사용
API 호출 / 데이터 핸들링	✅ 사용 가능	동일한 방식으로 호출 가능
UI 컴포넌트 (HTML/CSS)	❌ 새로 작성	React DOM ↔ React Native 컴포넌트 구조 다름 (div → View)
스타일링	❌ 다시 작성	CSS → StyleSheet 또는 styled-components/native 등으로 대체 필요

👉 구조를 잘 설계해두면 로직 재사용, UI 별도 작성하여 확장 가능

---

🧩 공통 로직과 플랫폼 전용 코드 분리

React Native는 div, span, img를 인식하지 않고 View, Text, Image를 사용한다. 따라서 UI 컴포넌트는 다시 작성하되, 로직이나 상태 관리는 그대로 가져올 수 있도록 폴더 구조와 책임 분리가 중요하다.

📁 폴더 구조 예시

src/
 ┣ 📂 common (공통 로직 및 훅)
 ┣ 📂 web (React 전용 컴포넌트)
 ┣ 📂 mobile (React Native 전용 컴포넌트)
 ┣ 📂 services (API 호출 등 공통 비즈니스 로직)
 ┣ 📂 assets (공통 이미지, 폰트)
 ┗ 📂 utils (공통 유틸 함수)

✅ /services, /hooks, /utils: 웹과 앱에서 공통 사용
❌ /web, /mobile: 플랫폼 전용 컴포넌트

---

📡 React Router vs React Navigation

React 웹은 react-router-dom, React Native는 @react-navigation/native를 사용한다.

import { Platform } from 'react-native';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { NavigationContainer } from '@react-navigation/native';

const App = () => {
  if (Platform.OS === 'web') {
    return (
      <Router>
        <Route path="/" component={Home} />
      </Router>
    );
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

👉  플랫폼에 따라 조건부 렌더링을 설정 가능

---

🌐 상태 관리

Zustand, Redux, Context API 등은 웹/앱 모두에서 사용 가능하다.

// useAuthStore.ts
import { create } from 'zustand';

export const useAuthStore = create(set => ({
  user: null,
  login: (user) => set({ user }),
}));

👉   store는 그대로 React Native에서도 사용 가능

---

🎨 스타일링

웹에서 CSS, Tailwind를 쓰던 방식은 React Native에서 동작하지 않는다.

웹	React Native
div.className="card"	<View style={styles.card}>
global.css	StyleSheet.create() 또는 styled-components/native

💡 Platform API를 사용해 조건부 스타일링도 가능

---

⚠️ 네이티브 API 사용 시 주의점

React Native에서는 카메라, 위치 정보, 푸시 알림 등 네이티브 기능을 사용할 수 있다. 네이티브 기능을 사용할 경우에는 웹과 앱의 로직을 완전히 분리하거나 네이티브 전용 훅을 따로 관리하는 것이 좋다.

---

🛠️ 빌드 및 배포

플랫폼	빌드 도구
웹	Vite, Webpack
앱	react-native-cli, expo, Xcode, Android Studio 등

👉 배포 방식이 다르므로 CI/CD 설정도 플랫폼별로 따로 구성

---

📱 PWA vs 하이브리드 앱 vs 네이티브 앱

React → React Native로 넘어갈 때 고려해볼 만한 다른 앱 형태

특징	웹 앱	하이브리드 앱	네이티브 앱
디바이스 기능 접근	❌ 불가능	✅ 가능	✅ 가능
성능	느림	보통	매우 빠름
개발 비용	낮음	중간	높음
사용자 경험	브라우저 따라 다름	꽤 좋음	최고 수준
설치 여부	불필요	필요	필요

👉 PWA (Progressive Web App): 웹 앱을 앱처럼 보여주는 방식으로, 앱스토어 배포보다는 SEO에 유리

---

✅ 마무리

• 공통 로직과 UI 분리 → 재사용성 극대화
• 플랫폼별 라우팅 & 스타일 관리 → 조건부 렌더링 적극 활용
• 네이티브 기능 구분 → Platform, 전용 훅으로 관리
• 앱과 웹 빌드 환경 분리 → CI/CD 파이프라인 따로 설정