[React Native] Core Component

React Native는 많은 Text, Image, 스크롤 등  다양한 Component를 제공하고 있어요

이러한 컴포넌트를 잘 활용하면 모바일 UI에서 원하면 화면을 손쉽게 구성할 수 있습니다

이번 포스팅에서는 React Native에서 제공하는 Core Component에 대해 소개하고 관련 예제를 살펴보겠습니다.

 

예제 코드는 Expo 환경에서 작성했습니다.

Expo가 어떤건지는 아래 포스팅에 자세히 작성했으니 궁금하신 분들은 확인해주세요! 

[Reative Native] Expo CLI와 React Native CLI 개념

 

그리고 개발환경 설정도 정리한 내용이 있습니다! 참조하시면 좋을것 같아요

[Reative Native] EXPO 개발환경 세팅 , Hello world 만들기 - Mac

 

그리고 이번 예제코드는 모두 Github에서 확인하실 수 있어요!

GitHub - choseungyoon/ReactNative_Study_Chapter_1: ReactNatvie Chapter 1 학습 자료입니다.

 

Core Component 종류

 

우리가 앱에서 쉽게 볼 수 있는 화면이죠. 사진과 이름이 나열되어 있는 List 뷰입니다. 

사진에서 쉽게 확인하실 수 있듯이

Android는 ViewGroup이라는 상자 안에 ImageView, TextView로 이 화면을 구성했어요

iOS는 UIView라는 상자안에 UIImageView, UITextView로 구성했습니다

React Native에서는 어떻게 표현할까요? 

 

✔️ View , Text

우선 Expo Project의 기본 코드부터 같이 볼게요.

 npx create-expo-app MyFirstExpo 명령어를 통해 생성한 초기 Expo 코드입니다.

# App.js

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
    </View>
  );
}

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

보시는 것과 같이 Android, iOS에서 ImageView, UIImageView로 표현되었는 Component가

React Native에서는 View로 표현되고 있습니다.

View는 가장 기본적인 UI 구성 요소로, 다른 Component를 포함할 수 있는 컨테이너 역할을 합니다.

CSS 중에서는 'div' 와 유사해요

TextView는 Text로 표현되고 있습니다. 위의 코드를 실행하면 아래와 같은 화면으로 보일거에요.

 

글자가 작아서 잘 안보이는것 같아요. 한번 Text에 CSS를 적용해볼게요.

# App.js

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize : 50,
    fontWeight : "bold"
  }

});

 

styles에 text라는 css 를 추가하고 글자사이즈를 Weight를 추가했습니다.

그리고 Text component에 style 요소를 추가했어요

이렇게 css 적용까지 했습니다. 쉽게 적용할 수 있습니다!

✔️ Image

이미지는 File형태 사진 파일을 사용할 수 있고 인터넷 상에 있는 url 링크를 사용할 수 있어요.

두가지 방법에 대해 모두 알아보겠습니다.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
      
      # Image File 경로 입력
      <Image source={require("./sample.jpeg") } style={styles.local_image} />
      
      # Image url 입력
      <Image source={{uri:"url Link"}} style={styles.url_image} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize : 50,
    fontWeight : "bold"
  },
  # File Image css
  local_image : {
    width : 100,
    height: 100
  },
  # Url Imasge css
  url_image : {
    width : 200,
    height: 200
  }

});

 

각각 이미지를 구분할 수 있도록 사이즈를 css로 변경해봤습니다. 

실행해보면 이미지 2개가 잘 나오시는걸 확인할 수 있습니다.

✔️ TextInput

TextInput은 말그대로 글자를 입력할 때 쓰는 익숙한 Component입니다.

사용자로부터 글자를 입력받을 때 많이 사용합니다. 

# App.js

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

export default function App() {
  return (
    <View style={styles.container}>
      <TextInput placeholder='Please write your name' style={styles.textInput}></TextInput>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize : 20,
    fontWeight : "bold"
  },
  textInput: {
    fontSize : 30,
    fontWeight : "bold"
  }

});

 

실행 결과도 같이 확인해볼게요

로그인하거나 텍스트 입력할 때 쉽게 볼 수 있는 화면입니다

TextInput 실행예제

 

✔️ Button

버튼도 화면에서 빠질 수 없는 필수 Componet죠.

Button이라고 명시해서 사용하면 됩니다. 클릭하면 경고창까지 나오도록 한번 해보겠습니다.

# App.js
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>

      <TextInput placeholder='Please write your name' style={styles.textInput}></TextInput>

      <Button title='Click Me!' onPress={()=> {
        alert("Click Button")
      }}></Button>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize : 20,
    fontWeight : "bold"
  },
  textInput: {
    fontSize : 30,
    fontWeight : "bold"
  }
});

Button 실행예제

 

✔️ ScrollView

한 화면에 모든 컨텐츠를 담을 수 없으니 Scroll 기능도 당연히 필수겠죠

지금까지 배운 모든 Compoent를 추가하고 ScrollView 컴포넌트를 사용해서 마지막 예제를 작성해보겠습니다. 

스크롤이 동작할 수 있도록 같은 이미지를 여러개 붙였어요. 코드가 깔끔하지 않은데 조금만 양해해주세요!

# App.js
import { StyleSheet, Text, View, Image, TextInput, ScrollView , Button ,Switch} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView>
        <Text style={styles.text}>Hello World </Text>

		# url link는 이미지링크 길이가 너무 길어서 생략했습니다!
        <Image source={require("./sample.jpeg") } style={styles.local_image} />
        <Image source={require("./sample.jpeg") } style={styles.local_image} />
        <Image source={require("./sample.jpeg") } style={styles.local_image} />
        <Image source={require("./sample.jpeg") } style={styles.local_image} />
        <Image source={require("./sample.jpeg") } style={styles.local_image} />
        <Image source={require("./sample.jpeg") } style={styles.local_image} />
        <Image source={require("./sample.jpeg") } style={styles.local_image} />
        <Image source={require("./sample.jpeg") } style={styles.local_image} />
        <Image source={require("./sample.jpeg") } style={styles.local_image} />

        <TextInput placeholder='Please write your name'></TextInput>

        <Button title='Click Me!' onPress={()=> {
          Alert("Click Button")
        }}></Button>
      </ScrollView>
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize : 20,
    fontWeight : "bold"
  },
  local_image : {
    width : 100,
    height: 100
  },
  url_image : {
    width : 200,
    height: 200
  }

});

 

Scroll 실행예제

 

Component 잘 사용해도 우리가 구현하고자 하는 대부분의 기능은 만들 수 있을거에요

물론 사용자 친화적으로 수정은 해야겠지만요

다음 포스팅에서는 Compoent에 대해 조금 더 상세하게 알아보겠습니다!