[React Native] 간단하게 레이아웃 구성 알아보기

이번에는 React Native 의 레이아웃 구성에 대해서 간단하게 알아보겠습니다.

React Native에서는 대표적으로 레이아웃 구성을 View 컴포넌트 구성 요소를 활용하여 만듭니다.

 

App.js

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

export default function App() {
  return (
    <View style={styles.appContainer}>
      <View>
        <TextInput placeholder='입력하시오' />
        <Button title="클릭"/>
      </View>
      <View>
        <Text>목표 리스트...</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  appContainer: {
    padding: 50
  }
});

- 레이아웃

일반 html 에서 레이아웃을 구분하기 위해 보통 div 태그를 사용하여 내용 섹션들을 구분 시켜 레이아웃을 지정합니다.

React Native 또한 div 태그 역할을 수행하여 구분하기 위해 View 컴포넌트 구성 요소를 사용합니다.

전체 구성 요소를 모아놓는 대분류 VIew 컴포넌트 구성 안에 두 가지의 View 구성 요소를 넣어 레이아웃을 지정하였습니다.

 

첫 번째 View 영역은 내용을 입력하여 버튼 클릭을 통해 일종의 동작이 수행되는 영역이고, 두 번째 View 영역은 버튼 클릭을 통해 정상적으로 수행된 내용들이 보여지게 될 결과 노출 영역으로 구성되었습니다.

 

 

실행시켜보면 크게 두 가지의 영역으로 레이아웃이 구분된 것을 확인할 수 있고, 작성한 내용대로 view가 구성된 것을 확인할 수 있습니다.

 

이렇게 기본적인 레이아웃 구조는 View 컴포넌트 구성 요소를 사용하여 만드는 것이 대표적이라고 볼 수 있습니다.

지금은 아주 간단하게 두 가지의 영역을 구분하여 레이아웃 구성을 하는 것에 그쳤지만 이후에 동작이 실제로 이루어지면서 좀 더 스타일을 적용시키면서 다양한 레이아웃을 구분시킬 수 있도록 구성해보도록 하겠습니다.