모바일 개발에서의 React Native: 개념, 핵심 원리 및 작동 방식

기초 (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — UI를 설명하기 위한 JavaScript의 구문 확장. HTML처럼 보이지만 React.createElement()를 통해 작동합니다. JSX 표현식: {variable}, {condition && <View />}, {array.map()}. Functional Component — JSX를 반환하는 함수. props를 인자로 받습니다. React의 현대적 표준 (React 16.8 이전에는 Class Components가 사용됨). Hooks — Functional Component에서 상태와 라이프사이클에 접근하기 위한 함수. Hooks 규칙: 최상위 수준에서만, Functional Components에서만 사용.

Hooks 참조

useState — 로컬 상태. useEffect — 사이드 이펙트. useContext — Context 접근. useRef — 변경 가능한 참조. useCallback — 함수 메모이제이션. useMemo — 값 메모이제이션. Custom Hooks — 재사용 가능한 로직: function useDebounce(value, delay).

// React Native에서 Hooks를 사용한 Functional Component
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — [value, setValue]를 반환합니다. setValue — 대체 (Class의 setState처럼 병합하지 않음). 객체의 경우: setUser(prev => ({ ...prev, name: 'New' })). useEffect — 렌더링 후 실행됩니다. 의존성 배열: [] — 한 번 (마운트), [dep] — dep 변경 시, undefined — 매 렌더링. 정리 함수 — return () => {}. useContext — const value = useContext(MyContext). 트리 상위에 Context.Provider가 필요합니다.

useRef — 렌더링 간에 값을 유지하는 변경 가능한 객체. .current — 변경. 사용처: 네이티브 요소 접근 (ref={inputRef}), 이전 값 저장, 타이머. useCallback — 메모이제이션된 함수를 반환합니다. const handlePress = useCallback(() => {}, [dep]). useMemo — 메모이제이션된 값을 반환합니다. const sorted = useMemo(() => data.sort(), [data]). 비용이 많이 드는 계산에는 useMemo를 사용하세요.

useState — 단순 상태용. useEffect — API 호출 및 구독용. useCallback/useMemo — 최적화용. IT Sectr은 모든 것을 메모이제이션하지 말고 실제 성능 문제가 있을 때만 사용할 것을 권장합니다.

Custom Hooks

Custom Hook — 내장 Hooks를 사용하는 함수. 이름이 use*로 시작합니다. 예: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks는 React Native에서 로직을 재사용하는 주요 방법입니다. IT Sectr은 비즈니스 로직을 Custom Hooks로 추출하고 컴포넌트를 깔끔하게 유지할 것 (JSX + 스타일만)을 권장합니다.

컴포넌트 (View, Text, FlatList, ScrollView, SafeAreaView)

View — 기본 컨테이너 (div와 유사). Text — 텍스트 (텍스트 전용 컴포넌트). TextInput — 텍스트 입력. ScrollView — 스크롤 가능한 컨테이너. FlatList — 대용량 데이터용 가상화 목록. SectionList — 섹션이 있는 FlatList. SafeAreaView — Safe Area로부터 자동 패딩 (노치, 상태 표시줄). Pressable — TouchableOpacity의 현대적 대체. useColorScheme — 다크/라이트 테마 감지.

FlatList 최적화

FlatList — 가상화: 보이는 항목 + windowSize만 렌더링됩니다. 최적화: 1) keyExtractor — 고유 키, 2) getItemLayout — 고정 높이 (onLayout 측정 생략), 3) renderItem에 React.memo, 4) maxToRenderPerBatch (기본값 10), 5) windowSize (기본값 21), 6) removeClippedSubviews, 7) initialNumToRender.

React Native 탐색

React Navigation — 표준 탐색 스택. NativeStackNavigator — 네이티브 애니메이션 (push/pop). TabNavigator — 하단 탭. DrawerNavigator — 사이드 메뉴. NavigationContainer — 탐색의 루트 컴포넌트. Deep linking — 외부 링크용 링킹 구성. 인증 흐름 — 조건부 탐색: isAuth ? AppStack : AuthStack. IT Sectr은 메인 화면에는 NativeStackNavigator를, 첫 번째 수준 탐색에는 TabNavigator를 권장합니다.

스타일 (StyleSheet)

StyleSheet.create() — 스타일 생성. 모든 속성은 카멜케이스: backgroundColor, fontSize, marginTop. Flexbox — 기본 레이아웃 모델 (flexDirection: 'column'). CSS 캐스케이드 없음, 상속 없음, 선택자 없음. 인라인 스타일 — 작동하지만 권장되지 않음. StyleSheet.compose() — 스타일 결합. Platform.select — 플랫폼별 스타일: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — 세이프 에리아 인셋 관리.

Styled Components 및 CSS-in-JS

Styled Components — React Native에서 CSS-in-JS를 위한 라이브러리. Restyle — 테마 + 반응형 스타일. NativeWind — React Native용 Tailwind CSS. Unistyles — 원자 CSS를 사용한 빠른 스타일. 다크 모드 — useColorScheme + 동적 스타일. IT Sectr은 단순함을 위해 StyleSheet.create를, 디자인 시스템이 있는 프로젝트에는 NativeWind를 권장합니다.

애니메이션 (Animated API)

Animated API — 선언적 애니메이션. Animated.Value — 애니메이션 값. Animated.timing — 간단한 애니메이션. Animated.spring — 스프링 애니메이션. Animated.View — 애니메이션 가능한 View. useNativeDriver — 네이티브 스레드에서 애니메이션 (transform, opacity — 지원). Animated.loop — 반복 애니메이션. LayoutAnimation — 레이아웃 변경 시 자동 애니메이션. reanimated 2/3 (라이브러리) — 더 높은 성능의 대안. Metro Bundler — JavaScript 번들러. JS + 에셋을 번들로 묶습니다. Fast Refresh (Hot Reload)를 지원합니다. Hermes — 모바일에 최적화된 JS 엔진: 빠른 시작, 적은 메모리. RN 0.70+부터 기본값.

Gesture Handler 및 애니메이션

React Native Gesture Handler — 네이티브 제스처 처리. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — 선언적 제스처 API. Reanimated + Gesture Handler — 제스처로 60fps 애니메이션을 위한 조합. react-native-skia — 복잡한 2D 그래픽을 위한 GPU 렌더링. IT Sectr은 Animated API보다 성능이 우수한 모든 애니메이션에 Reanimated 3를 권장합니다.

네트워킹 (fetch, AsyncStorage, API)

fetch — 내장 HTTP 클라이언트. GET, POST, headers, body를 지원합니다. Axios — 인터셉터가 있는 인기 라이브러리. AsyncStorage — 키-값 저장소 (UserDefaults와 유사). MMKV — WeChat의 AsyncStorage에 대한 빠른 대안. react-native-keychain — 안전한 토큰 저장. React Query (TanStack Query) — 서버 상태 관리: 캐싱, 재검증, 페이지네이션. IT Sectr은 API 요청에는 React Query를, 로컬 저장소에는 MMKV를 권장합니다.

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

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules 및 Turbo Modules

Native Module — JS와 네이티브 코드 간의 브리지 (Android는 Java/Kotlin, iOS는 ObjC/Swift). JS에서 네이티브 API를 호출할 수 있습니다. Turbo Modules (New Architecture) — 기존 Native Modules의 대체. 동기 호출, Codegen을 통한 타입 지정, 오버헤드 감소. Fabric Renderer — 동기 레이아웃을 갖춘 새 렌더러. JSI (JavaScript Interface) — 브리지 없이 JS가 네이티브 객체에 직접 접근. IT Sectr은 새 프로젝트에는 Turbo Modules를, 기존 프로젝트에는 Native Modules를 권장합니다.

// Android 네이티브 모듈 (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

테스팅 (Jest, React Native Testing Library)

Jest — 표준 테스트 러너. describe/it/expect. React Native Testing Library — 컴포넌트 테스트. render, fireEvent, waitFor. screen.getByText, getByTestId — 검색. userEvent — 액션 시뮬레이션. Snapshot 테스트 — toMatchSnapshot(). MSW (Mock Service Worker) — API 모킹. Detox — RN용 E2E 테스트 (grey-box, 네이티브). IT Sectr은 컴포넌트에는 React Native Testing Library를, 엔드투엔드 시나리오에는 Detox를 권장합니다.

CodePush (App Center) — App Store/Google Play에 게시하지 않고 JS 번들을 OTA 업데이트. 용도: 핫픽스, A/B 테스트, 콘텐츠 변경. 제한 사항: 네이티브 코드 변경 불가. 대안: EAS Update (Expo), react-native-update. IT Sectr은 긴급 수정에는 CodePush를, Expo 프로젝트에는 EAS Update를 권장합니다.

Expo — React Native용 프레임워크. 관리형 워크플로우 — 모든 구성은 app.json을 통해. Development builds — eject 없이 사용자 정의 네이티브 모듈. Expo SDK — 내장 모듈: 카메라, 생체인식, 알림. EAS Build — 클라우드 빌드. Expo Router — 파일 기반 라우팅 (Next.js와 유사). IT Sectr은 새 프로젝트에는 Expo를, 깊은 네이티브 사용자 정의가 필요한 프로젝트에는 bare RN을 권장합니다.