[React-Native] SafeAreaView란?

전에 잠깐 리액트 네이티브를 찍먹 느낌으로 해봤었는데 어쩌다 vs code를 키니 예전에 작성했던 리액트 네이티브 프로젝트가 나와서 이대로 버리기엔 아까워서 개념이라도 적어둔다.

이 태그에 대한 리액트 네이티브의 공식 홈페이지 설명은 아래와 같다.

 

https://reactnative.dev/docs/safeareaview

SafeAreaView · React Native

SafeAreaView의 목적은 장치의 안전 영역 경계 안에서 컨텐츠를 렌더링하는 것이다. iOS 11 이상이 설치된 아이폰에만 적용된다. SafeAreaView는 중첩된 컨텐츠를 렌더링하고 탐색 표시줄, 탭 표시줄, 툴바, 기타 상위 뷰에서 다루지 않는 뷰 부분을 반영하도록 패딩을 자동 적용한다. 가장 중요한 것은 SafeArea의 패딩이 둥근 모서리나 카메라 노치(아이폰 13의 센서 하우징 영역) 같은 화면의 물리적 한계를 반영한다는 것이다

 

요약하면 아이폰의 상단 중앙에 밑으로 툭 튀어나온 검은 사각형 부분 때문에 나온 뷰라는 것 같다.

노치가 무엇인지 모르는 사람들은(나도 안드로이드 핸드폰을 사용해서 노치를 처음 들었다)아래 사진을 보면 뭔지 알 것이다.

 

 

SafeAreaView가 적용되지 않은 사진을 보면 시계 부분의 뷰까지 글자가 침범하는 걸 볼 수 있다. 그런데 노치란 것 때문에 글자가 안 보인다.

그리고 적용된 사진을 보면 안드로이드로 치면 상태바 부분의 백그라운드가 하얗게 보이면서 뷰 최상단의 글자들이 제대로 보이는 걸 확인할 수 있다.

 

아래는 리액트 네이티브 공식 홈페이지에서 제공하는 예제다. App.js에 아래 코드를 복붙하고 빌드하면 확인할 수 있다.

 

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

export default function App() {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.text}>Page content</Text>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    text: {
        fontSize: 25,
        fontWeight: '500',
    },
});

 

이것을 실행하면 아래 화면이 나타난다.

 

 

아이폰 에뮬레이터로 빌드해야 확인할 수 있다. 안드로이드 핸드폰에선 빌드해봤자 별 차이가 없다.