React Native 강의를 들으면서 접한
컴포넌트 개념을 정리해보겠습니다
목차
- SafeAreaView
- TouchableOpacity
- ScrollView
- Stack
(새로운 컴포넌트를 접할 때마다 내용 추가 예정)
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.tsxname="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 은 해당 화면에서 네비게이션 헤더(상단 바)를 숨기겠다는 의미이다
댓글