React Native 2

이번 포스팅에서는 React Native의 Core Components에 대해서 알아보겠습니다.

 

다시 한번 Core Components가 어떤 건지 짚어보자면..

 

React Native의 Core Components는 React Native에서 렌더링 되는 기본적인 UI 요소들을 말합니다.
이러한 Core Components를 사용하여 React Native 앱을 개발할 수 있습니다.

 

어떤 컴포넌트가 있을까요? 주로 사용되는 Core Components를 알아보겠습니다. 

 

1. <View> View는 React Native에서 가장 기본적인 컴포넌트 중 하나입니다.
이는 다른 컴포넌트들의 컨테이너 역할을 하며, CSS의 div와 유사합니다.

import { View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

export default App;

 

2. <Text> Text는 텍스트를 표시하는 데 사용됩니다. 이는 HTML의 span과 유사합니다.

import { Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <Text style={styles.text}>안녕하세요!</Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default App;

 

3. <Image> Image는 이미지를 표시하는 데 사용됩니다.
React Native에서는 웹과 달리 이미지의 크기를 미리 지정해주는 것이 좋습니다.

import { Image, StyleSheet } from 'react-native';

const App = () => {
  return (
    <Image
      style={styles.image}
      source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
    />
  );
};

const styles = StyleSheet.create({
  image: {
    width: 50,
    height: 50,
  },
});

export default App;

 

4. <TextInput> TextInput은 텍스트 입력을 받는 데 사용됩니다. 이는 HTML의 input과 유사합니다.

import { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native';

const App = () => {
  const [text, setText] = useState('');

  return (
    <TextInput
      style={styles.input}
      onChangeText={setText}
      value={text}
      placeholder="텍스트를 입력하세요."
    />
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
  },
});

export default App;

 

5. <ScrollView> ScrollView는 스크롤 가능한 뷰를 만드는 데 사용됩니다.
이는 HTML의 div와 유사하지만, 스크롤이 가능합니다.

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

const App = () => {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada, nunc vel vestibulum faucibus, quam sapien suscipit velit, sit amet pulvinar augue nulla in lorem. Aliquam sollicitudin fermentum metus, sit amet sagittis tellus tristique in. Maecenas nec sapien in odio bibendum efficitur vel vel sapien. Vivamus sed odio nisi. Nam ac nibh nec massa maximus ultricies id at arcu. Fusce sed elit vel elit rhoncus convallis. In hac habitasse platea dictumst. Proin eget quam at magna iaculis euismod vitae nec augue. Suspendisse eget elit ut elit auctor hendrerit vel ut arcu. Sed venenatis ullamcorper turpis, eu pellentesque nisl dapibus a. Ut sed velit tellus. Duis dictum lorem felis, id congue tellus maximus id. Nam bibendum enim a vestibulum aliquam. Vestibulum sodales metus velit, in rhoncus libero ultricies at.</Text>
      <Text style={styles.text}>Phasellus auctor interdum mauris in cursus. Aliquam venenatis sit amet odio a consectetur. Morbi eget ultricies mi, eget malesuada nulla. Suspendisse imperdiet mi in arcu suscipit posuere. Pellentesque ac purus augue. Vestibulum non arcu eget enim imperdiet malesuada in eu tellus. Sed a ullamcorper ante. Vestibulum vitae tellus nunc. Curabitur sit amet blandit enim. Donec consequat velit arcu, at tincidunt risus bibendum eu. In hac habitasse platea dictumst. Aenean a tincidunt nibh, ut hendrerit arcu.</Text>
      <Text style={styles.text}>Maecenas tincidunt mi ut neque faucibus aliquet. Etiam at dolor vel nunc tincidunt scelerisque. Sed quis ex sapien. Aenean malesuada, massa a aliquet auctor, est nibh faucibus sapien, vitae ultrices dolor mauris sit amet nisl. Aenean luctus diam diam, sed egestas quam sollicitudin sed. Fusce pretium velit enim, eget interdum arcu accumsan sed. Ut ut efficitur leo. Ut elementum malesuada massa ut ullamcorper. Curabitur vestibulum nunc sed urna dictum molestie. Praesent in risus eget est elementum imperdiet ut ac velit. Suspendisse gravida efficitur magna, sit amet molestie massa bibendum eget. In in sagittis est. Praesent pharetra enim vitae lobortis viverra.</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 16,
    lineHeight: 24,
    marginBottom: 16,
  },
});

export default App;

 

6. <FlatList> FlatList는 스크롤 가능한 목록을 만드는 데 사용됩니다.

React Native에서 가장 일반적으로 사용되는 컴포넌트 중 하나입니다.

ScrollView와 다른 점은 FlatList는 화면에 보여지는 데이터만 렌더링한다는 점입니다. 

import { FlatList, StyleSheet, Text, View } from 'react-native';

const DATA = [
  { id: '1', title: '첫 번째 아이템' },
  { id: '2', title: '두 번째 아이템' },
  { id: '3', title: '세 번째 아이템' },
  { id: '4', title: '네 번째 아이템' },
  { id: '5', title: '다섯 번째 아이템' },
];

const App = () => {
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{item.title}</Text>
    </View>
  );

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

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 24,
  },
});

export default App;

 

7. <TouchableOpacity> TouchableOpacity는 터치 가능한 영역을 만드는 데 사용됩니다.
이는 HTML의 button과 유사합니다.

import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';

const App = () => {
  return (
    <TouchableOpacity style={styles.button}>
      <Text style={styles.text}>버튼</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    fontSize: 18,
  },
});

export default App;

 

8. <StyleSheet> StyleSheet는 CSS 스타일링을 작성하는 데 사용됩니다.
이는 React Native에서만 사용할 수 있는 특별한 문법을 사용합니다. 

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>스타일 시트 예시</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default App;

 

9. <SafeAreaView> SafeAreaView는 React Native에서 사용되는 또 다른 컴포넌트입니다. 이는 상단 바와 하단 탭 바 등의 뷰와 겹치지 않도록 컨텐츠를 안전한 영역에 배치하는 데 사용됩니다.

SafeAreaView는 기본적으로 뷰의 경계와 상하단 바, 하단 탭 바 등과의 간격을 유지하여, 컨텐츠가 안전한 영역에 위치하도록 보장합니다. 이는 다양한 기기에서 일관된 레이아웃을 유지하면서, 뷰가 화면의 경계를 벗어나는 것을 방지합니다.

SafeAreaView는 React Native 0.50 버전부터 추가된 컴포넌트이며, iOS와 Android에서 모두 사용할 수 있습니다. 일반적으로, 모든 루트 뷰에 적용하여 앱 전체에서 일관된 레이아웃을 유지하는 것이 좋습니다.

 

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

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>SafeAreaView 예시</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default App;

 

이번 포스팅에서는 Core Components에 대해서 알아보았으며, 다음 포스팅에서는 다른 주제를 들고오겠습니다.

 

감사합니다. (__)