배움 기록/React Native

[React Native] 주요 컴포넌트 개념 정리

dygreen 2025. 1. 26. 21:04
반응형
React Native 강의를 들으면서 접한
컴포넌트 개념을 정리해보겠습니다

 

목차

  • SafeAreaView
  • TouchableOpacity
  • ScrollView
  • Stack
  • Tabs
  • FlatList

 

 

SafeAreaView

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <View>
        <Text>안전 영역 내의 콘텐츠</Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

 

SafeAreaView 는 안전 영역(safe area) 내에 콘텐츠를 렌더링하도록 도와주는 컴포넌트이다.

주로 iOS 기기에서 노치(notch), 상태 표시줄(status bar), 홈 인디케이터(home indicator) 등과 같은 화면의 특수 영역을 피하여

콘텐츠가 잘리지 않도록 보장하는 역할을 한다.

 

(Android 에서는 기본적으로 큰 차이가 없다)

 

TouchableOpacity

import React from 'react';
import { TouchableOpacity, Text, Alert } from 'react-native';

const App = () => {
  const handlePress = () => {
    Alert.alert('버튼이 눌렸습니다!');
  };

  return (
    <TouchableOpacity onPress={handlePress}>
      <Text>버튼</Text>
    </TouchableOpacity>
  );
};

export default App;

 

TouchableOpacity 는 터치 가능한 컴포넌트 중 하나이다.

주로 버튼이나 터치 가능한 요소를 구현할 때 사용되며, 사용자가 터치할 때 불투명도(Opacity)가 변하는 시각적 피드백을 제공한다.

이를 통해 사용자에게 터치가 인식되었음을 직관적으로 전달할 수 있다.

 

ScrollView

import React from 'react';
import { ScrollView, View, Text } from 'react-native';

const App = () => {
  return (
    <ScrollView>
      {Array.from({ length: 20 }).map((_, index) => (
        <View key={index}>
          <Text>아이템 {index + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

export default App;

 

ScrollView 는 스크롤 가능한 영역을 생성하는 데 사용되는 컴포넌트이다.

콘텐츠가 화면 크기를 초과할 때 수직 또는 수평으로 스크롤할 수 있도록 해주어, 긴 목록이나 많은 양의 콘텐츠를 표시할 때 유용하다.

 

Stack (expo-router)

/app/_layout.tsx
return (
  <Stack>
    <Stack.Screen name="index" options={{ headerShown: false }} />
    <Stack.Screen name="(auth)" options={{ headerShown: false }} />
    <Stack.Screen name="(root)" options={{ headerShown: false }} />
    <Stack.Screen name="+not-found" />
  </Stack>
);

 

Stack 은 네비게이션 스택(Stack Navigation)을 관리하는 주요 도구이다. (expo-router 라이브러리 제공)

즉, Stack 컴포넌트를 사용하여 네비게이션 구조를 정의한다.

여러 화면(Screen)을 계층적으로 쌓아올려 사용자 간의 화면 전환을 관리한다.

 

Stack.Screen 은 네비게이션 스택 내의 개별 화면을 정의한다.

각 화면은 고유한 name 속성을 가지며, 해당 이름을 통해 화면을 식별하고 네비게이션할 수 있다.

expo-router 는 파일 시스템 기반 라우팅을 사용하기 때문에, name은 파일 구조와 밀접한 관련이 있다.

app/
├── index.tsx
├── (auth)/
│   ├── login.js
│   └── register.js
├── (root)/
│   ├── home.js
│   └── profile.js
├── +not-found.tsx
└── _layout.tsx
  • name="index" : /app/index.tsx 와 연동됨
  • name="(auth)" : /app/(auth) 폴더와 연동됨
  • name="(root)" : /app/(root) 폴더와 연동됨
  • name="+not-found" : /app/+not-found.tsx 와 연동됨
    • + 기호는 동적 라우팅(Dynamic Routin)을 나타낼 수 있다.
    • +not-found 는 존재하지 않는 라우트에 대한 404 페이지를 나타낸다

options 속성으로 headerShown: false 은 해당 화면에서 네비게이션 헤더(상단 바)를 숨기겠다는 의미이다

 

Tabs (expo-router)

/app/(root)/(tabs)/_layout.tsx
return (
  <Tabs 
    initialRouteName="home"
    screenOptions={}
  >
    <Tabs.Screen
      name="home"
      options={{
        title: "Home",
        headerShown: false,
        tabBarIcon: ({ focused }) => (
          <TabIcon source={icons.home} focused={focused} />
        ),
      }}
    />
  </Tabs>
);

 

Tabs 는 탭 기반 네비게이션(Tab Navigation)을 구현하는 데 사용된다. (expo-router 라이브러리 제공)

여러 개의 탭을 정의하고, 각 탭에 연결된 화면(Screen)을 전환할 수 있게 해준다.

  • initialRouteName : 초기 로드 시 활성화될 탭의 이름을 지정
  • screenOptions : 모든 탭에 공통으로 적용할 옵션을 설정

 

Tabs.Screen 은 개별 탭 화면을 정의한다.

  • name : 각 탭을 식별하는 고유한 이름. 네비게이션 경로(route)와도 연관 있음
  • options : 각 탭의 개별 옵션을 설정
    • title : 탭의 제목을 설정함
    • headerShown : 각 탭 화면의 상단 바를 표시할지 여부 설정
    • tabBarIcon : 탭에 표시될 아이콘 정의

 

FlatList

const DATA = [
  { id: '1', title: '첫 번째 아이템' },
  { id: '2', title: '두 번째 아이템' },
  { id: '3', title: '세 번째 아이템' },
  // ... 추가 데이터
];

const MyList = () => {
  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
  
  const handleRefresh = async () => {
    setIsRefreshing(true);
    await refetch();
    setIsRefreshing(false);
  };
  
  const renderItem = ({ item }) => (
    <View>
      <Text>{item.title}</Text>
    </View>
  );

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

 

FlatList 는 긴 리스트의 데이터를 효율적으로 렌더링하기 위해 제공되는 컴포넌트다.

FlatList 는 가상화(virtualization) 기법을 사용하여 화면에 보이는 항목들만 렌더링하고, 나머지는 렌더링하지 않아 메모리 사용과 렌더링 성능을 최적화할 수 있다.

 

( React 에서 map 함수를 통해 리스트를 보여주는 로직을 React Native 에서는 FlatList 를 사용함으로써 간편하게 구현할 수 있다. )

 

  • data : 렌더링할 데이터 배열 전달
  • renderItem : 각 아이템을 렌더링할 함수를 지정 (리스트 컴포넌트를 반환하는 함수)
  • keyExtractor : 각 아이템의 고유 키를 반환하는 함수

FlatList 를 당겨서 새로고침 기능을 구현하는 방법 (refreshing 과 onRefresh 속성 두 개를 함께 쓰면 됨)

  • refreshing : 현재 새로 고침 중인지 나타내는 boolean 값 (true 면 로딩 스피너가 나타남)
  • onRefresh : 사용자가 리스트를 당겼을 때 호출되는 함수

 

 

 

728x90
반응형