맛깔난 회원가입 페이지를 구현해보고자! 왔습니다. 약간 토스나 요즘 앱들 회원가입 페이지를 보면 한 페이지에 다 들어가있는게 아니라 하나 하나씩 크게 나뉘어서 페이지가 넘어가는 식이더라구요. 저도 그렇게 만들어보면서 기록을 남기고 싶더라구욥! 유튜브에 토스 회원가입 클론코딩 강의영상이 있어서 참고하면서 만들어보겠습니다!

https://www.youtube.com/watch?v=HGBgwplCxwM

틀 잡기

영상에서 처음 틀을 잡을 때, safeAreaView라는 것을 쓰셔서 검색해보았다.

safeAreaView

SafeAreaView는 기기의 안전 영역 경계 내에서 콘텐츠를 렌더링하는 것이다. 현재 iOS 버전 11 이상의 iOS 기기에만 적용된다고 한다.

아래 블로그에 자세히 설명되어 있습니다.
https://velog.io/@shhyunn/React-Native-3.-iOS%EC%97%90%EC%84%9C-%EB%85%B8%EC%B9%98%EC%99%80-%ED%99%88-%EC%9D%B8%EB%94%94%EC%BC%80%EC%9D%B4%ED%84%B0-%EA%B3%A0%EB%A0%A4%ED%95%98%EC%97%AC-UI-%EB%B0%B0%EC%B9%98%ED%95%98%EA%B8%B0

ios에서 정말 중요한 역할을 한다고 볼 수 있다! 그래서 react-native-safe-area-context 라이브러리를 설치하여 사용해보았다.

SafeAreaProvider는 안전 영역 정보를 제공하며, 앱의 최상단 컴포넌트에 위치해야 한다.
SafeAreaView는 실제로 안전 영역을 적용하는 컴포넌트로, 노치, 상태 바, 홈 인디케이터 등을 피해 콘텐츠를 렌더링한다.
useSafeAreaInsets는 top, bottom 등의 노치와 홈 인디케이터를 고려한 insets 값을 가져올 수 있다.
이 insets를 사용하기 위해서는 앱의 최상단 컴포넌트를 SafeAreaProvider로 감싸준 후, 사용해야 한다.

나는 안드로이드, ios 크로스 플랫폼으로 간단하게 제작하고 있기 때문에 provider안에 view를 넣었다. 안드로이드에서는 SafeAreaView가 그냥 View로 인식된다!

코드는 영상을 참고하여 다음과 같이 작성하였다.

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

export default function SignUpEmail() {
    return (
        <SafeAreaProvider>
            <SafeAreaView
            style={{
                width: '100%',
                height: '100%',
                backgroundColor: 'black',
            }}>
                <View style={{
                    width: '90%',
                    height: '100%',
                    backgroundColor: 'red',
                    marginLeft: '5%',
                }}>
                </View>
            </SafeAreaView>
        </SafeAreaProvider>
    );
}

음 근데 제가 안드로이드, 윈도우밖에 없어서... 잘 되는지 확인할 방법이 없네요!!!!!! 일단 안드로이드에서 화면은 다음처럼 나옵니다.

정리

ios 앱을 개발할 때는 SafeAreaProvider와 SafeAreaView 그리고 useSafeAreaInsets를 꼭 신경써서 개발하자!