React Native 앱 개발하기 (3)

이번 시간에는 ReactNative에서 제공하는 View들과 View에 기능을 추가하는 방법을 알아보겠습니다.

View 종류

1. View: 가장 기본적인 UI 컨테이너 컴포넌트입니다.
2. ScrollView: 스크롤 가능한 컨테이너입니다.
3. FlatList: 대량의 데이터를 효율적으로 렌더링하는 리스트 컴포넌트입니다.
4. SectionList: 섹션으로 구분된 리스트를 렌더링합니다.
5. Text: 텍스트를 표시하는 컴포넌트입니다.
6. TextInput: 사용자 텍스트 입력을 받는 컴포넌트입니다.
7. Image: 이미지를 표시하는 컴포넌트입니다.
8. ImageBackground: 배경 이미지로 사용할 수 있는 컴포넌트입니다.
9. TouchableOpacity: 터치 이벤트를 처리할 수 있는 투명도 조절 가능한 컴포넌트입니다.
10. TouchableHighlight: 터치 시 하이라이트 효과를 주는 컴포넌트입니다.
11. Button: 기본적인 버튼 컴포넌트입니다.
12. Switch: On/Off 토글 스위치 컴포넌트입니다.
13. Slider: 슬라이더 컴포넌트입니다.
14. Picker: 드롭다운 선택 컴포넌트입니다. (iOS에서는 deprecated)
15. ActivityIndicator: 로딩 인디케이터 컴포넌트입니다.
16. Modal: 모달 다이얼로그를 표시하는 컴포넌트입니다.
17. SafeAreaView: 안전 영역 내에 콘텐츠를 렌더링하는 컴포넌트입니다.
18. KeyboardAvoidingView: 키보드가 나타날 때 콘텐츠를 자동으로 조정하는 컴포넌트입니다.
19. StatusBar: 상태 바를 제어하는 컴포넌트입니다.
20. DrawerLayoutAndroid: Android 전용 드로어 레이아웃 컴포넌트입니다.
21. RefreshControl: 당겨서 새로고침 기능을 구현하는 컴포넌트입니다.
22. WebView: 웹 콘텐츠를 표시하는 컴포넌트입니다.

이 외에도 커스텀 컴포넌트를 만들어 사용할 수 있으며, 서드파티 라이브러리를 통해 추가적인 UI 컴포넌트들을 활용할 수 있습니다. React Native의 크로스 플랫폼 특성상, 일부 컴포넌트는 플랫폼에 따라 다르게 동작하거나 특정 플랫폼에서만 사용 가능할 수 있습니다.

이벤트 추가하기

1. 이벤트 핸들러 추가: View에 직접 터치 이벤트를 추가할 수 있습니다.

<View onTouchStart={() => console.log('Touch started')}>
{/* View 내용 */}

2. Touchable 컴포넌트 사용: View를 터치 가능하게 만들려면 Touchable 컴포넌트로 감싸는 것이 좋습니다.

import { TouchableOpacity } from 'react-native';

<TouchableOpacity onPress={() => console.log('Pressed')}>  
{/\* View 내용 \*/}

3. 스타일 및 애니메이션: Animated API를 사용하여 View에 애니메이션을 추가할 수 있습니다.

import { Animated } from 'react-native';

const fadeAnim = useRef(new Animated.Value(0)).current;

Animated.timing(fadeAnim, {  
toValue: 1,  
duration: 1000,  
useNativeDriver: true,  
}).start();

<Animated.View style={{ opacity: fadeAnim }}>  
{/\* View 내용 \*/}  
</Animated.View>

4. 제스처 핸들링: PanResponder를 사용하여 복잡한 제스처를 처리할 수 있습니다.

import { PanResponder } from 'react-native';

const panResponder = PanResponder.create({  
onStartShouldSetPanResponder: () => true,  
onPanResponderMove: (evt, gestureState) => {  
// 제스처 처리 로직  
},  
});

<View {...panResponder.panHandlers}>  
{/\* View 내용 \*/}

5. 레이아웃 애니메이션: LayoutAnimation을 사용하여 View의 레이아웃 변경에 애니메이션을 적용할 수 있습니다.

import { LayoutAnimation } from 'react-native';

const toggleLayout = () => {  
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);  
setExpanded(!expanded);  
};

<View style={{ height: expanded ? 200 : 100 }}>  
{/\* View 내용 \*/}

6. 조건부 렌더링: 상태에 따라 View의 내용을 동적으로 변경할 수 있습니다.

const \[isVisible, setIsVisible\] = useState(true);

{isVisible && This text is visible}

커스텀 컴포넌트 생성:  
View를 확장하여 재사용 가능한 커스텀 컴포넌트를 만들 수 있습니다.  
typescript  
const CustomView = ({ children, onPress }) => (

{children}

);

<CustomView onPress={() => console.log('Custom view pressed')}>  
Custom View Content

7. 네이티브 모듈 연동: 필요한 경우, 네이티브 모듈을 만들어 View와 연동할 수 있습니다. 이는 플랫폼 특정 기능을 사용해야 할 때 유용합니다.

이러한 방법들을 조합하여 View에 다양한 기능을 추가할 수 있습니다. 상황과 요구사항에 따라 적절한 방법을 선택하면 됩니다.