SafeAreaView는 앱의 콘텐츠가 기기의 노치, 물리적 버튼 또는 사용자 경험을 방해할 수 있는 기타 요소와 겹치지 않도록 도와주는 React Native의 기본 제공 컴포넌트입니다.
개발자가 SafeAreaView를 사용하면 컴포넌트 내의 콘텐츠가 사용자에게 표시되도록 보장되는 화면의 지정된 영역인 안전 영역 내에 유지되도록 합니다.
최신 스마트폰은 화면 크기와 모양이 다양하고 기기마다 노치, 곡선 모서리 및 기타 디자인 특징이 있어 콘텐츠가 화면에 표시되는 방식에 영향을 줄 수 있기 때문에 SafeAreaView가 필요합니다. 개발자는 SafeAreaView를 사용하여 앱이 실행되는 기기에 관계없이 앱의 콘텐츠가 항상 명확하고 읽기 쉬우며 사용자 친화적인 방식으로 표시되도록 할 수 있습니다.
안드로이드 디바이스의 용어
안드로이드 디바이스의 경우 디스플레이 컷아웃이라는 용어가 사용되고 있습니다.
Support display cutouts | Android Developers
애플 디바이스의 용어
애플 디바이스의 경우 Safe area layout, React Native의 SafeAreaView와 비슷한 용어가 사용되고 있습니다.
Positioning content relative to the safe area | Apple Developer Documentation
관련 라이브러리
컨텍스트 API를 활용하여 추가적인 기기 정보를 활용 할 수 있도록 되어 있으나, 화면 회전과 관련해서 성능 최적화 문제가 있을 수 있기 때문에 가급적이면 기본 제공 컴포넌트를 사용하는 것을 안내하고 있습니다. 사용 방법이 크게 어렵지 않고, 필요한 경우 빠르게 추가하여 사용이 가능해 보입니다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0
