liminfoReact Native Reference
React Native 프레임워크 레퍼런스
React Native Reference 소개
React Native 레퍼런스는 React Native 크로스 플랫폼 모바일 개발을 위한 포괄적이고 검색 가능한 치트 시트입니다. 컴포넌트, 네비게이션, 스타일, 네이티브 모듈, 상태 관리, 애니메이션 등 6개 카테고리에 걸쳐 27개 항목을 다룹니다. 각 항목에는 정확한 JSX 또는 JavaScript 구문, 설명, 완전히 실행 가능한 코드 예제가 포함되어 있어 새 화면 구축, 기기 하드웨어 연동, 성능 최적화 시 필요한 패턴을 빠르게 복사하고 적용할 수 있습니다.
이 레퍼런스는 모든 경험 수준의 React Native 개발자를 위해 설계되었습니다. 컴포넌트 섹션은 View(컨테이너), Text(텍스트 표시), Image(resizeMode 포함), TextInput(제어 입력), FlatList(가상화 스크롤 리스트), TouchableOpacity(탭 피드백) 등 핵심 구성 요소를 다룹니다. 네비게이션 섹션은 React Navigation의 createStackNavigator, createBottomTabNavigator, 화면 전환과 라우트 파라미터 전달을 위한 navigation.navigate(), 뒤로 가기를 위한 navigation.goBack()을 다룹니다.
스타일 섹션은 StyleSheet.create(), flexDirection과 justifyContent를 포함한 Flexbox 레이아웃, 반응형 크기 조정을 위한 Dimensions.get("window"), iOS/Android별 스타일을 위한 Platform.select()를 설명합니다. 네이티브 모듈 섹션은 브리징을 위한 NativeModules, 외부 URL과 tel: 링크를 위한 Linking.openURL(), Android 런타임 권한을 위한 PermissionsAndroid.request(), 영구 로컬 키-값 저장소를 위한 AsyncStorage를 다룹니다. 상태 관리는 useState, cleanup이 있는 useEffect, 전역 상태를 위한 useContext, createSlice와 configureStore를 사용하는 Redux Toolkit을 다룹니다.
주요 기능
- React Native 핵심 컴포넌트: View, Text, Image(resizeMode), TextInput, FlatList(keyExtractor/renderItem), TouchableOpacity
- React Navigation: createStackNavigator, createBottomTabNavigator, params를 포함한 navigate(), goBack()
- 스타일 시스템: StyleSheet.create(), Flexbox(flexDirection, justifyContent, alignItems), 반응형 Dimensions, Platform.select()
- 네이티브 모듈: NativeModules 브리지, Linking.openURL(), PermissionsAndroid.request(), AsyncStorage get/set
- 상태 관리를 위한 React Hooks: useState, 의존성 배열과 cleanup이 있는 useEffect, Provider 패턴을 사용하는 useContext
- Redux Toolkit: reducers가 있는 createSlice, configureStore, useSelector와 useDispatch 통합 패턴
- Animation API: timing()이 있는 Animated.Value, friction/tension이 있는 spring(), 레이아웃 전환을 위한 LayoutAnimation
- 컴포넌트·네비게이션·스타일·네이티브 모듈·상태 관리·애니메이션으로 바로 이동할 수 있는 카테고리 기반 탐색
자주 묻는 질문
React Native에서 View와 Text의 차이점은 무엇인가요?
View는 HTML의 div와 같은 React Native의 기본 컨테이너 컴포넌트로, Flexbox를 사용하여 다른 컴포넌트를 그룹화하고 레이아웃하는 데 사용됩니다. Text는 문자열 내용을 표시할 수 있는 유일한 컴포넌트입니다. 웹과 달리 React Native에서는 Text 컴포넌트 외부에서 날 텍스트를 렌더링할 수 없습니다. 모든 표시 텍스트는 Text(또는 내부적으로 Text를 렌더링하는 컴포넌트) 안에 있어야 합니다.
React Native에서 스크롤 가능한 리스트를 효율적으로 만드는 방법은?
긴 목록이나 동적 목록에는 ScrollView 대신 FlatList를 사용합니다. FlatList는 가상화를 사용하여 화면에 현재 표시되는 항목과 작은 버퍼만 렌더링하므로 수천 개의 항목이 있어도 메모리 사용량을 낮게 유지합니다. data 배열, 항목별 고유 문자열을 반환하는 keyExtractor 함수, 각 행의 JSX를 반환하는 renderItem 함수를 제공해야 합니다.
React Navigation을 사용한 네비게이션은 어떻게 작동하나요?
React Navigation은 push/pop 화면 전환을 위한 createStackNavigator(), 탭 바 네비게이션을 위한 createBottomTabNavigator() 등 네비게이터 컴포넌트를 제공합니다. 네비게이터 안에 화면을 배치하면 React Navigation이 모든 화면 컴포넌트에 navigation prop을 주입합니다. navigation.navigate("ScreenName", { param: value })로 다른 화면으로 이동하고 데이터를 전달하며, route.params로 파라미터를 읽습니다.
StyleSheet.create()와 인라인 스타일의 차이점은 무엇인가요?
StyleSheet.create()는 개발 시 스타일 속성을 검증하고 일부 React Native 브리지에서 전체 객체 대신 스타일 ID를 브리지를 통해 전송하는 성능 최적화를 적용할 수 있습니다. 인라인 스타일은 매 렌더마다 새 객체를 생성하여 자주 리렌더링하는 컴포넌트를 느리게 만들 수 있습니다. 정적이거나 거의 변경되지 않는 스타일에는 항상 StyleSheet.create()를 사용하세요. 런타임에 계산되는 동적 스타일은 인라인이나 배열 구문으로 StyleSheet 스타일과 병합할 수 있습니다.
React Native에서 Android와 iOS 스타일 차이를 어떻게 처리하나요?
StyleSheet 내에서 Platform.select({ ios: value, android: value })를 사용하여 플랫폼별 값을 적용합니다. 예를 들어 iOS에서는 노치를 고려해 paddingTop을 44로, Android에서는 0으로 설정합니다. 조건부 로직에서 Platform.OS === "ios"를 사용하거나, React Native가 해당 플랫폼에 맞게 자동으로 선택하는 .ios.js 및 .android.js 확장자를 가진 별도 파일을 만들 수도 있습니다.
AsyncStorage는 어떻게 작동하며 언제 사용해야 하나요?
AsyncStorage(@react-native-async-storage/async-storage)는 React Native를 위한 간단하고 영구적인 암호화되지 않은 키-값 저장소입니다. 앱 재시작 후에도 유지되어야 하는 사용자 기본 설정, 인증 토큰, 앱 상태를 저장하는 데 사용합니다. 모든 작업은 비동기이고 Promise를 반환하므로 await AsyncStorage.setItem("key", "value")와 await AsyncStorage.getItem("key")를 사용합니다. 비밀번호 같은 민감한 데이터에는 보안 저장소 라이브러리를 사용합니다.
useState나 useContext 대신 Redux Toolkit을 언제 사용해야 하나요?
useState는 폼 입력이나 가시성 토글 같은 로컬 컴포넌트 상태에 사용합니다. useContext는 테마나 로케일처럼 컴포넌트 서브트리가 필요로 하는 중간 복잡도의 공유 상태에 사용합니다. Redux Toolkit은 연결되지 않은 많은 컴포넌트가 읽고 업데이트해야 하는 복잡한 상태 로직이 있을 때, Redux DevTools로 타임 트래블 디버깅이 필요할 때, 또는 이전 상태에 비이자명한 방식으로 의존하는 상태 업데이트가 있을 때 사용합니다. createSlice는 일반 Redux에 비해 보일러플레이트를 크게 줄여줍니다.
Animated API의 useNativeDriver는 무엇이며 왜 중요한가요?
Animated.timing()이나 Animated.spring()에서 useNativeDriver: true를 설정하면 JavaScript 브리지를 완전히 우회하여 애니메이션을 네이티브 스레드로 이동합니다. 이를 통해 JS 스레드가 바쁜 경우에도 부드러운 60fps 애니메이션을 구현할 수 있습니다. 단점은 transform, opacity 같은 스타일 속성의 서브셋만 네이티브 드라이버를 지원한다는 것입니다. width, height, top/left 같은 레이아웃에 영향을 주는 속성은 useNativeDriver를 사용할 수 없어 JS 스레드에서 실행해야 합니다.