React Native vs React: 어떤 것을 선택해야 할까?

React와 React Native, 뭐가 다를까?

JavaScript 개발자라면 React와 React Native를 모두 들어봤을 것입니다. 비슷한 이름과 철학을 공유하지만, 서로 다른 플랫폼을 대상으로 합니다.

기본 정의

React

// React: 웹 브라우저용
import React from 'react';

function WebApp() {
  return (
    <div className="container">
      <h1>Hello, Web!</h1>
      <p>이건 웹 브라우저에서 렌더링됩니다</p>
    </div>
  );
}

웹 애플리케이션을 위한 JavaScript 라이브러리로, HTML과 CSS를 사용하여 DOM에 렌더링합니다.

React Native

// React Native: 모바일 앱용
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function MobileApp() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, Mobile!</Text>
      <Text>이건 네이티브 앱으로 렌더링됩니다</Text>
    </View>
  );
}

모바일 앱을 위한 프레임워크로, React 패러다임을 사용하되 네이티브 UI 컴포넌트로 렌더링합니다.

핵심 차이점

React의 강점

1. 광범위한 생태계

# 수천 개의 라이브러리와 도구
npm install react-router-dom  # 라우팅
npm install redux             # 상태 관리
npm install styled-components # 스타일링

2. SEO 친화성

// Next.js로 서버 사이드 렌더링
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

검색 엔진이 콘텐츠를 크롤링할 수 있어 SEO에 유리합니다.

3. 빠른 개발 사이클

• 핫 리로딩
• 브라우저 개발자 도구
• 빠른 배포 (빌드 후 업로드)

React Native의 강점

1. 코드 재사용 (70-90%)

// 하나의 코드베이스로 iOS + Android
const App = () => {
  return (
    <View>
      <Header />        {/* iOS, Android 공용 */}
      <ProductList />   {/* iOS, Android 공용 */}
      <Footer />        {/* iOS, Android 공용 */}
    </View>
  );
};

2. 네이티브 성능

// 부드러운 애니메이션
import { Animated } from 'react-native';

const fadeAnim = useRef(new Animated.Value(0)).current;

Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true,  // 네이티브 스레드에서 실행
}).start();

3. 기기 기능 접근

import { Camera } from 'expo-camera';
import * as Location from 'expo-location';

// 카메라 사용
const takePicture = async () => {
  const photo = await cameraRef.current.takePictureAsync();
};

// GPS 위치 얻기
const getLocation = async () => {
  const location = await Location.getCurrentPositionAsync({});
};

선택 가이드

React를 선택할 때

✅ SEO가 중요한 프로젝트

• 블로그, 마케팅 사이트, 이커머스

✅ 웹 중심 애플리케이션

• 대시보드, 관리 패널, SaaS

✅ 빠른 출시가 필요할 때

• MVP, 프로토타입

React Native를 선택할 때

✅ 모바일 우선 전략

• 주요 사용자가 모바일에서 접근

✅ 크로스 플랫폼 필요

• iOS와 Android 동시 지원

✅ 기기 기능 필요

• 카메라, GPS, 푸시 알림, 생체 인증

하이브리드 접근법

많은 기업이 두 기술을 함께 사용합니다:

[공유 로직]
   ├── React (웹)
   │     └── next.js + react
   │
   └── React Native (모바일)
         └── expo + react-native

코드 공유 전략

// shared/utils.js - 공유 유틸리티
export const formatDate = (date) => {
  return new Intl.DateTimeFormat('ko-KR').format(date);
};

export const validateEmail = (email) => {
  return /^[^s@]+@[^s@]+.[^s@]+$/.test(email);
};

// shared/api.js - 공유 API 로직
export const fetchUser = async (id) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

개발 환경 비교

React

# Create React App
npx create-react-app my-web-app
cd my-web-app
npm start  # localhost:3000

React Native

# Expo (권장)
npx create-expo-app my-mobile-app
cd my-mobile-app
npx expo start  # QR 코드로 폰에서 테스트

결론

대부분의 현대 프로젝트는 웹과 모바일 모두 필요하므로, React 지식을 기반으로 두 기술을 모두 익히는 것이 경쟁력입니다.