- 최소한의 변경으로 재사용할 수 있는 프로그램 코드나 문서의 템플릿을 의미합니다. - 즉, 이를 사용하면 프로젝트 설정, 폴더 구조, 기본 기능 구현 등을 처음부터 직접 작성할 필요 없이, 검증된 구조와 설정을 바로 사용할 수 있어 개발 시간을 크게 단축할 수 있습니다
- 프로젝트를 시작할 때 필요한 기본 구조와 설정을 미리 갖춘 템플릿자주 사용되는 코드나 기능들이 미리 구현되어 있는 기초 프레임워크개발자가 새 프로젝트를 빠르게 시작할 수 있도록 도와주는 초기 코드 세트입니다.
1. react-native-boilerplate 주요 특징
💡 react-native-boilerplate 주요 특징
주요 특징
설명
Javascript or TypeScript
모든 프로젝트와 개발팀의 상황이 다르기 때문에, 자바스크립트나 타입스크립트 중 원하는 언어를 선택할 수 있습니다.
Navigation
React Navigation을 통해 앱의 화면 이동을 쉽게 구현할 수 있습니다.
Data fetching️
TanStack Query를 사용하여 서버와의 데이터 통신을 간편하게 처리할 수 있습니다.
Internationalization
React i18next를 통해 여러 언어를 쉽게 지원할 수 있습니다.
Multi theming
추가 설치 없이도 앱의 테마를 쉽게 관리하고 변경할 수 있습니다.
Safe synchrone storage
React Native MMKV를 이용해 앱 내 데이터를 안전하고 빠르게 저장할 수 있습니다.
프레젠테이션 구성 요소를 구성하기 위한 원자 설계 방법론을 따르는 애플리케이션 구성 요소의 홈입니다.
src/hooks
@tanstack/react-query
애플리케이션 전반에 사용자 정의 훅(hook)가 사용됩니다.
src/navigation
@react-navigation/native, @react-navigation/stack
탐색 처리(페이지 이동)를 담당하는 탐색 구성 요소입니다.
src/screens
-
다양한 앱 화면을 나타내는 화면 구성 요소입니다.
src/services️
ky
주택 데이터 수집 및 관련 서비스.
src/theme
애플리케이션에 대한 테마 구성을 보관합니다.
src/translations
i18next, react-i18next
언어 지원(다국어)과 관련된 구성입니다.
[ 더 알아보기 ] 💡 원자 설계 방법론(Atomic Design) 중 Atoms (원자)은 무엇을 의미하는가?
- 버튼, 입력 필드, 레이블과 같은 가장 기본적인 UI 요소들을 분리하는 방식을 의미합니다. 1. 재사용성 향상: 작은 컴포넌트부터 체계적으로 구성하여 재사용이 용이 2. 일관성 유지: 동일한 디자인 패턴을 유지하기 쉬움 3. 유지보수 용이: 컴포넌트 단위로 관리되어 수정이 쉬움 4. 개발 효율성: 컴포넌트 기반 개발로 작업 효율성 증가
3) 프로젝트 구조 상세 파악 하기
1. index.js
💡 index.js
- 해당 페이지에서는 app.json 파일 내에 name을 가져와서 App 이름으로 지정하고 있습니다. - 개발 환경인 경우 ‘reactotron-react-native’ 라이브러리를 이용하여 모니터링하고 디버깅을 수행함을 확인하였습니다.
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './src/App';
if (__DEV__) {
import('@/reactotron.config');
}
AppRegistry.registerComponent(appName, () => App);
[ 더 알아보기 ] 💡 Reactotron
- React 및 React Native 애플리케이션을 위한 디버깅 도구입니다. - 이를 통해 개발자들이 앱의 동작을 실시간으로 모니터링하고 디버깅할 수 있도록 합니다.
1. import '@/translations' - 다국어 지원을 위한 i18n 라이브러리 설정으로, JSON 파일을 통해 각 언어별 번역을 관리할 수 있습니다.
2. QueryClientProvider - @tanstack/react-query를 사용하여 서버 상태 관리와 데이터 페칭을 처리합니다. 코드에서는 mutations와 queries에 대해 retry 옵션을 false로 설정하여 실패 시 재시도를 하지 않도록 구성되어 있습니다.
3. ThemeProvider - 앱의 테마 관리를 담당하는 컴포넌트입니다. MMKV 스토리지와 함께 사용되어 테마 설정을 저장하고 관리합니다.
4. ApplicationNavigator - 앱의 내비게이션 구조를 정의하고 관리하는 컴포넌트로, 화면 간의 이동과 라우팅을 처리합니다.
import 'react-native-gesture-handler';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { MMKV } from 'react-native-mmkv';
import { ThemeProvider } from '@/theme';
import ApplicationNavigator from '@/navigation/Application';
import '@/translations';
export const queryClient = new QueryClient({
defaultOptions: {
mutations: {
retry: false,
},
queries: {
retry: false,
},
},
});
export const storage = new MMKV();
function App() {
return (
<GestureHandlerRootView>
<QueryClientProvider client={queryClient}>
<ThemeProvider storage={storage}>
<ApplicationNavigator />
</ThemeProvider>
</QueryClientProvider>
</GestureHandlerRootView>
);
}
export default App;
3. ApplicationNavigator.tsx
💡 ApplicationNavigator.tsx
- react-navigation을 기반으로 라우팅 처리를 수행하는 페이지입니다. - 해당 컴포넌트에서는 라우팅을 위한 이름을 지정하고 컴포넌트를 지정하여서 navigation을 통해 페이지를 이동하는 라우터 역할을 제공합니다.
import type { RootStackParamList } from '@/navigation/types';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { useTheme } from '@/theme';
import { Paths } from '@/navigation/paths';
import { Example, Startup } from '@/screens';
const Stack = createStackNavigator<RootStackParamList>();
function ApplicationNavigator() {
const { navigationTheme, variant } = useTheme();
return (
<SafeAreaProvider>
<NavigationContainer theme={navigationTheme}>
<Stack.Navigator key={variant} screenOptions={{ headerShown: false }}>
<Stack.Screen component={Startup} name={Paths.Startup} />
<Stack.Screen component={Example} name={Paths.Example} />
</Stack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
);
}
export default ApplicationNavigator;
4. Example.tsx
💡 Example.tsx
- 해당 컴포넌트에서는 다국어 지원, 테마 관리, 사용자 데이터 조회의 주요 기능들을 포함하고 있습니다.
1. useTranslation(), useI18n() hook을 통해 공통으로 구성된 다국어 지원 기능이 구현되어 있습니다.
2. useTheme() hook을 통해 공통으로 구성된 다크/라이트 테마 전환 기능이 구현되어 있습니다.
3. useFetchOneQuery() hook을 통해 공통으로 구성된 API 통신을 위한 랜덤 한 사용자 ID로 데이터를 조회하고, 성공 시 Alert로 사용자 이름을 표시합니다
4. 렌더링 되는 화면에서는 ‘사용자 데이터 조회 버튼’, ‘테마 변경 버튼’, ‘언어 변경 버튼’이 적용되어 있습니다.
