[React-Native] SafeAreaView

SafeAreaView

SafeAreaView는 중첩된 콘텐츠를 렌더링하고 자동으로 패딩을 적용하여 탐색 모음, 탭 모음, 도구 모음 및 기타 상위 뷰로 덮이지 않은 뷰 부분을 반영합니다. 중요한 것은 Safe Area의 패딩이 둥근 모서리나 카메라 노치(예:iPhon 13의 센서 하우징 영역)와 같은 물리적 한계를 반영한다는 것입니다.

SafeArea는 IOS에서 상단과 하단 영역에 여백을 확보해줌으로써, 안전한 영역에 콘텐츠를 렌더링하게 해줍니다.

const App = () => {
	return (
    	<SafeAreaView>
        	<Text>hello world</Text>
        </SafeAreaView>
     );
};

이렇게 되면 상단, 하단에 여백을 확보해준 다음 "hello world"가 화면에 나옵니다.
SafeAreaView 없이 "hello world"를 작성하게 될 경우 맨 위에 여백이 확보되지 않은 상태에서 출력되기 때문에 둥근 부분이나 카메라 노치 부분에서 잘립니다.