웹 프론트엔드 개발자가 앱 개발을 시작할 때 꼭 알아야 할 React Native 개념들

jimmmy_jin 2025. 4. 5. 20:50

React 기반의 웹 개발에 익숙한 프론트엔드 개발자라면, React Native(RN) 역시 금방 적응할 수 있다.
하지만 웹과 앱은 환경 자체가 다르기 때문에, 초기 진입 시 반드시 인지하고 있어야 할 차이점들이 있다.
이 글에서는 웹 개발자가 RN을 시작하면서 반드시 이해하고 넘어가야 할 핵심 개념들과 함께 코드 예시를 정리했다.

1. DOM이 없다

React Native에서는 HTML 태그를 사용할 수 없다. 대신 View 기반의 추상 UI 요소를 사용한다.

// 웹 (React)
<div style={{ padding: 20 }}>
  <p>Hello world</p>
</div>

// RN
<View style={{ padding: 20 }}>
  <Text>Hello world</Text>
</View>

2. 브라우저 API는 사용할 수 없다

브라우저 환경이 아니기 때문에 window, document, localStorage 등은 사용할 수 없다.

// ❌ 이런 코드는 에러 남
console.log(window.innerWidth);
const token = localStorage.getItem('accessToken');

// ✅ 대안: React Native API 사용
import * as Location from 'expo-location';
const location = await Location.getCurrentPositionAsync({});

3. localStorage 대신 AsyncStorage를 사용한다

비동기 기반의 간단한 로컬 저장소로 @react-native-async-storage/async-storage를 사용한다.

import AsyncStorage from '@react-native-async-storage/async-storage';

// 저장
await AsyncStorage.setItem('@mood', 'happy');

// 불러오기
const value = await AsyncStorage.getItem('@mood');

// 삭제
await AsyncStorage.removeItem('@mood');

객체 저장 시에는 반드시 JSON.stringify() 해야 한다.

4. 화면 전환은 Stack Navigation으로 관리한다

React Navigation을 통해 화면을 "스택처럼 쌓고" 관리한다.

// App.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './screens/Home';
import Detail from './screens/Detail';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Detail" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Home.tsx
navigation.navigate('Detail', { id: 1 });

// Detail.tsx
const { id } = route.params;
navigation.goBack();

5. 스타일링은 JS로 한다 (또는 Tailwind)

CSS 파일을 쓰지 않고, 스타일은 객체 또는 nativewind의 className으로 작성한다.

// 기본 StyleSheet 방식
<View style={{ backgroundColor: '#eee', padding: 10 }}>
  <Text style={{ fontSize: 16 }}>Hello</Text>
</View>

// Tailwind 스타일 (with nativewind)
<View className="bg-gray-200 p-4">
  <Text className="text-base">Hello</Text>
</View>

Tailwind 유틸을 그대로 사용하되, rem, %, em 대신 정해진 클래스 기준을 따른다.

6. 앱은 정적인 HTML/CSS 파일이 아니라 빌드가 필요하다

웹은 npm run build 후 정적 파일을 서버에 올리면 되지만, RN은 네이티브 앱 빌드를 따로 진행해야 한다.

# iOS 빌드
eas build --platform ios

# Android 빌드
eas build --platform android

개발 중에는 다음 명령어로 시뮬레이터 실행이 가능하다:

npx expo start

7. 픽셀은 픽셀이 아니다

React Native의 px 단위는 실제 화면 해상도가 아닌 **디바이스 독립 단위(DP)**를 기준으로 한다.

// 이건 아이폰과 안드로이드에서 실제 크기가 다르게 보일 수 있음
<View style={{ width: 100, height: 100 }} />

반응형 레이아웃은 Tailwind로 처리하는 것이 더 직관적이다:

<View className="w-full aspect-square bg-red-200" />

8. 디버깅 도구가 다르다

크롬 DevTools는 사용 불가능하지만, RN은 Metro 번들러와 Flipper, Dev Menu를 활용한다.

npx expo start

i 키: iOS 시뮬레이터 실행
m 키: Android 메뉴
r: 리로드
d: 디버그 모드

앱 내에서는 console.log()가 여전히 유효하다.

9. 터치 기반 UX 설계가 중요하다

모바일은 손가락으로 조작하기 때문에 터치 영역이 충분히 커야 하고, 사용자 액션에 반응하는 애니메이션이 중요하다.

<TouchableOpacity onPress={onPress}>
  <View className="p-4 bg-blue-500 rounded-xl">
    <Text className="text-white">버튼</Text>
  </View>
</TouchableOpacity>

애니메이션은 react-native-reanimated 또는 Lottie를 사용할 수 있다.

마무리

React Native는 웹 개발자의 React 경험을 그대로 활용할 수 있지만, 브라우저라는 환경이 사라진다는 전제에서 모든 것을 새로 보는 자세가 필요하다.

DOM은 없다 → View 기반 UI
CSS는 없다 → JS 스타일 또는 Tailwind
브라우저 API 없다 → Expo + Native API 사용
localStorage 없다 → AsyncStorage
URL 라우터 없다 → Stack Navigation

이 개념들만 이해하면 React Native도 웹처럼 자연스럽게 개발할 수 있게 된다.
다음 편에서는 React Native 앱에 다크모드, 상태관리, 퍼포먼스 최적화 등을 적용하는 방법을 소개할 예정이다.