[React-Native] View란?

https://reactnative.dev/docs/view

View · React Native

UI를 구축하는 가장 기본 컴포넌트. View는 flexbox, style, 일부 터치와 접근성 컨트롤을 갖춘 레이아웃을 지원하는 컨테이너다. View는 UIView, <div>, android.view 등 리액트 네이티브가 실행되는 플랫폼에 상관없이 네이티브 뷰에 해당하는 뷰에 직접 매핑된다
View는 다른 View 안에 중첩되도록 설계됐으며 모든 유형의 자식을 n개 가질 수 있다

 

https://reactnative.dev/docs/intro-react-native-components

Core Components and Native Components · React Native

안드로이드, iOS 개발에서 View는 UI의 기본 컴포넌트로 텍스트, 이미지를 표시하거나 유저 입력에 응답하는 데 쓸 수 있는 화면의 작은 직사각형 요소다. 텍스트 한 줄이나 버튼 같은 앱의 가장 작은 시각적 요소도 View의 일종이다. 일부 종류의 View는 다른 View를 포함할 수 있다. 모든 것이 View다

 

리액트 네이티브의 View는 리액트 네이티브의 가장 기본적인 컴포넌트다. 다른 컴포넌트들을 감싸고 배치하는 역할을 수행하고 css와 비슷한 스타일 속성들을 적용하거나 터치 이벤트 처리에 사용한다.

아래는 리액트 네이티브 문서의 View 예시를 조금 수정한 코드다. 이 코드를 실행하기 전 터미널에서 아래 명령어를 실행한다.

 

npm install react-native-safe-area-context

 

만약 위 명령어를 실행한 것만으로 안 된다면 아래 명령어들도 순서대로 실행한다.

 

cd ios
pod install
cd ..
npx react-native run-ios

 

아래가 코드다.

 

import React from 'react';
import {Text, SafeAreaView, View} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{height: 100, flexDirection: 'row'}}>
        <View style={{backgroundColor: 'blue', flex: 0.2}} />
        <View style={{backgroundColor: 'red', flex: 0.4}} />
        <Text>Hello World!</Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default App;

 

이걸 실행하면 아래와 같은 화면이 나온다.

 

 

아이폰의 노치 영역을 건들지 않도록 SafeAreaProvider와 SafeAreaView를 사용하고 그 안에서 View 2개와 텍스트를 배치했다.

flexDirection이 row로 설정됐기 때문에 가로로 표시되는 것이고, 첫 번째 View는 전체 너비의 20%를 차지하고 두 번째 뷰는 40%를 차지한다.

"Hello World!"는 flexbox의 특징 중 하나인 남은 공간이 있으면 그 공간을 차지하는 특성 때문에 자연스럽게 가로 영역의 남은 40%를 차지한다.

 

아래는 좀 더 기본적인 사용법이다.

 

import React from 'react';
import {Text, SafeAreaView, View} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <View>
          <Text>안녕하세요</Text>
          <Text>식사하셨나요?</Text>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default App;

 

 

아래는 View에 스타일을 적용한 예시다.

 

import React from 'react';
import {Text, SafeAreaView, View} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <View
          style={{
            backgroundColor: '#FFF000',
            padding: 20,
            margin: 10,
            borderRadius: 8,
            borderWidth: 1,
            borderColor: '#FF00FF',
          }}>
          <Text>스타일을 적용해 봤습니다</Text>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default App;

 

 

아래는 flexbox 레이아웃 형태의 예시다.

 

import React from 'react';
import {SafeAreaView, View} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: 20,
          }}>
          <View style={{backgroundColor: 'red', width: 50, height: 50}} />
          <View style={{backgroundColor: 'green', width: 50, height: 50}} />
          <View style={{backgroundColor: 'blue', width: 50, height: 50}} />
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default App;