[Expo] Expo 기본 프로젝트 구조 분석하기

npx create-expo-app@latest 로 생성한 Expo의 기본 프로젝트는 아래와 같은 파일 구조로 이루어져 있습니다.

app

앱의 기본적인 구조를 정의합니다. _layout.tsx에서는 앱에 어떤 화면(페이지)들이 존재하는지 정의합니다. <Stack>이라는 이름의 컴포넌트를 사용하는데, 이는 여러 개의 화면들을 스택으로 쌓아 보여주는 것입니다. 맨 위에 오는 요소가 제일 먼저 보이는 화면이므로, 기본 템플릿에서는 (tabs) 경로의 화면이 맨 처음 보이게 됩니다. (tabs) 화면이 사라지면, modal.tsx에서 정의한 화면이 보일 것입니다.

<Stack>
  <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
  <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
</Stack>

(tabs)

(tabs) 하위 경로는 탭 화면을 구현한 파일들을 모아놓은 폴더입니다.

이렇게 괄호()로 묶인 이름의 폴더는 URL 경로에 포함되지 않기 때문에, 이들의 실제 경로는 이렇게 생각해야 합니다.

app/(tabs)/index.tsx    // => '/'
app/(tabs)/explore.tsx  // => '/explore'

(tabs)에 있는 _layout.tsx는 (tabs)화면 내에서의 레이아웃을 정의합니다. 기본 템플릿에서는 <Tabs> 컴포넌트로 탭 화면을 구현하고 있는데, 각각 index와 explore라는 이름의 .tsx파일을 가져옵니다.

<Tabs
  screenOptions={{
    tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
    headerShown: false,
    tabBarButton: HapticTab,
  }}>
  <Tabs.Screen
    name="index"
    options={{
      title: 'Home',
      tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
    }}
  />
  <Tabs.Screen
    name="explore"
    options={{
      title: 'Explore',
      tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
    }}
  />
</Tabs>

assets

app 파일들에서 구현할 때 필요한 외부 자원을 저장합니다. 기본 템플릿에는 images 경로만 존재하는데, 여기에는 화면에 쓰이는 이미지 말고도 안드로이드/iOS 용 아이콘과 웹 실행을 위한 favicon 등이 저장되어 있습니다.

components

기본적인 React Native 컴포넌트들을 저장해 놓았습니다.

파일	기능	기본 템플릿에서 사용하고 있는지?
external-link	외부링크 텍스트	o
haptic-tab	눌렀을 때 진동효과를 주는 탭 버튼	x
hello-wave	애니메이션이 있는 🖐이모지	o
parallex-scroll-view	뒷 배경이 천천히 이동하는 스크롤	o
themed-text	사용자가 지정한 type에 따라 스타일이 달라지는 텍스트	o
themed-view	사용자가 지정한 type에 따라 스타일이 달라지는 뷰	o

ui

파일	기능	기본 템플릿에서 사용하고 있는지?
collapsible	아코디언	o
icon-symbol.ios	svg 벡터 이미지 (iOS 용)	o
icon-symbol	svg 벡터 이미지 (안드로이드 용)	o

constants

색상과 글꼴을 정하는 theme.tsx를 포함합니다.

hooks

환경이나 조건이 바뀜에 따라 동작을 취하는 React hook들을 제공합니다.

파일	기능
use-color-scheme	모바일 기기의 테마 정보(라이트/다크)를 그대로 가져옴
use-color-scheme.web	웹의 테마 정보(라이트/다크)를 그대로 가져옴
use-theme-color	현재 테마 정보(라이트/다크)에 맞는 색을 가져옴

scripts

기본 템플릿에는 reset-project.js파일 하나만 있는데, 이는 npm run reset-project로 실행하는 파일입니다. 실행 시 모든 파일을 app-example에 넣어버리고 비어있는 새 파일을 생성합니다.