[App] React Native/Study

SafeArea: 화면의 안전 영역 보장

유진진 2025. 7. 4. 13:32

 

Safe Area 란?

https://reactnative.dev/docs/safeareaview

 

SafeAreaView · React Native

The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.

reactnative.dev

 

SafeArea는 ios 디바이스를 위해 나왔으며, 기기의 안전 영역 경계 내에서 콘텐츠를 렌더링하는 것이다.

현재 ios 버전 11 이상을 사용하는 기기에만 적용된다. 

 

SafeAreaView는 중첩된 콘텐츠를 렌더링하고, 네비게이션 바, 탭 바, 툴 바 및 기타 상위 뷰에 포함되는 뷰 부분을 반영하기 위해 자동으로 패딩을 적용한다. 안전 영역의 패딩이 둥근 모서리나 카메라 노치와 같은 화면의 물리적 한계를 반영한다.

 

아이폰 상단 부분(노치)과 하단 부분(홈 인디케이터)으로 화면이 침범하지 않게 보호해주는 틀이라는 뜻이다.

 

 

SafeArea가 없을 때(왼) vs. SafeArea가 있을 때 (오)

SafeArea가 없으면 아이폰 상단 부분과 하단 부분을 침범하게 된다.

 

 

사용 방법

1. 내장 SafeAreaView 사용하기

리액트 네이티브에서 기본으로 제공한다. 하지만 ios에서만 확실히 동작한다. 

import {SafeAreaView} from 'react-native';

const App = () => {
  return (
    <SafeAreaView className="flex-1">
      <Text>Page content</Text>
    </SafeAreaView>
  );
};

 

 

2. `react-native-safe-area-context`라이브러리를 이용해 사용하기

Getting Started: https://appandflow.github.io/react-native-safe-area-context/

더 유연하게 안전 영역을 컨트롤하기 위해 이 라이브러리를 사용할 수도 있다. 

이 경우 ios와 android 모두 대응하여 이걸 사용하는 것이 더 좋다.

 

설치하기

npm install react-native-safe-area-context

 

사용하기 

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

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }} edges={['top', 'bottom']}>
        <Text>안전한 영역 안의 텍스트</Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

 


 

화면 구성 

이 화면을 보자. 

각각의 내부 요소를 확인하기 쉽게 하기 위해 배경색을 넣었다.

 

App.tsx 코드 

1. View (회색 배경)

가장 바깥의 껍데기 View

 

에서 x축 패딩을 넣고 `flex-1`로 화면 전체를 채우게 한다. 

그 아래 요소도 전체를 채울 것이므로 화면 정중앙 정렬을 할 필요는 없다. 

 

2. SafeArea (파란색 배경)

`flex-1`로 전체를 채우고, 그 안에 내부 콘텐츠가 들어가게 한다. 

import { SafeAreaView } from 'react-native-safe-area-context';

<View className="flex-1 px-[20px] {회색}">
  <SafeAreaView className="flex-1 {파란색}">
    {/* 내부 콘텐츠 (핑크색 배경) 스타일은 w-full */}
  </SafeAreaView>
</View>

 

지금은 보기 편하게 색을 넣어주었지만, 나중에는 가장 바깥 껍데기에만 배경색을 넣어서 그 아래 콘텐츠에게도 적용되도록 하여,

전체 배경색을 통일시킬 수 있다.