[React Native] 핵심 컴포넌트 간단하게 다뤄보기

이번에는 <Text>, <View> 와 같은 핵심 컴포넌트 구성 요소를 조금 더 자세하게 사용하고 알아보며 정리하겠습니다.

 

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Test Project</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

현재 App.js 컴포넌트 전체 구성입니다.

지금 가상 머신을 통해 프로젝트를 실행하면,

 

 

정상적으로 현재 App에 구성된 핵심 컴포넌트들이 적용되어 노출되는 것을 확인할 수 있습니다.

여기서 핵심 컴포넌트 태그인 Text를 지워보겠습니다.

 

 

저장하고 다시 실행해보면 텍스트가 삭제된 것을 확인할 수 있습니다.

삭제했으니 당연히 내용이 안나오는 것은 당연한 일입니다.

 

 

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      안녕하세요 개발자입니다.
      <StatusBar style="auto" />
    </View>
  );
}

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

이번에는 기존에 Text 컴포넌트가 있는 자리에 텍스트만 기입하여 실행해보겠습니다.

 

 

그러면 에러가 발생되는 것을 알 수 있습니다.

에러 내용은 반드시 텍스트는 Text 컴포넌트 안에서 사용되어야 한다라는 것이 명시되어 있습니다.

즉, import를 받고 해당 컴포넌트를 사용하지 않는 것은 괜찮으나 내용을 넣을 때 반드시 컴포넌트 내부에 사용되어져야 한다는 것입니다.

 

 

이번에는 Text와 View 만이 아니라 다른 컴포넌트 구성 요소 태그를 사용해보겠습니다.

 

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native'; // Button 컴포넌트 추가

export default function App() {
  return (
    <View style={styles.container}>
      <View> // View 구성 요소 중복 사용
        <Text>안녕하세요 개발자입니다.</Text>  
      </View>
      <Text>으쯔라구요</Text>
      <Button title='클릭' /> // Button 구성 요소 추가
      <StatusBar style="auto" />
    </View>
  );
}

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

- Button 컴포넌트 구성 요소 추가

Button 또한 React Native 에서 기본적으로 제공하는 핵심 컴포넌트 구성 요소입니다.

떄문에 React Native에서 명시하여 import를 시켜주었고, 일반 html 처럼 Button 태그를 사용하였습니다.

다른 점은 일반 html 에서는 value 속성이나 button 시작 태그와 끝 태그 사이에 일반 텍스트를 기입하여 버튼 명을 지정해주었는데, React Native에서는 title이라는 속성에 기입하면 버튼 명이 나오게 됩니다.

 

- View 컴포넌트 구성 요소 중복 사용

위의 코드에서도 볼 수 있듯이 View 구성 요소를 중복으로 사용하였습니다.

현재로서는 큰 의미가 없지만 이후 코드의 문맥 파악을 위한 용도로 구분할 수 있다는 것을 알기 위해 중복으로 사용해 보았습니다.

 

위의 예시 코드를 실행해보면,

 

작성한 내용대로 출력되는 것을 확인할 수 있습니다.

버튼은 버튼대로 클릭이라는 버튼 명과 함께 출력되었으며, View  중복 사용으로 인해 마치 p 태그를 사용하면 자동으로 개행되는 것처럼 다음 행에 텍스트가 노출되는 것을 볼 수 있습니다.

 

 

이렇게 해서 일부 컴포넌트 구성 요소들만 간단하게 다뤄보았습니다.

새롭게 만져본 Button 구성 요소는 아직 버튼 명만 가지고 있고 동작은 수행되지 않는 상태이기 때문에 이후 동작까지 수행될 수 있도록 업데이트 해보도록 하겠습니다.

뿐만 안이라 기타 다른 컴포넌트 구성 요소들도 같이 좀 더 자세하게 만지면서 다뤄보도록 하겠습니다.