인생퍼즐 앱에서 사용하고 있는 Styled View, Container의 용도에 대해 정리한다.
View 종류
react-native 에서 자주 쓰이는 View 에 대한 질문에 chatGPT의 대답중 몇가지를 정리했다.
1. View
- 가장 기본적인 컨테이너 컴포넌트
- 다른 컴포넌트들을 포함하고 레이아웃을 구성하는 데 사용.
- 스타일링, 포지셔닝, 레이아웃을 위한 속성들을 적용.
2. SafeAreaView
- 노치나 화면 상단의 상태 바 등에 컨텐츠가 가려지지 않도록 안전한 영역 내에서 UI를 렌더링.
- iOS 기기의 화면 상단과 하단의 안전한 영역을 고려할 때 유용.
3. ScrollView
- 스크롤 가능한 컨테이너
- 수직 또는 수평 스크롤을 지원.
4. KeyboardAvoidingView
- 키보드가 화면에 표시될 때, 키보드와 겹치지 않도록 뷰를 자동으로 조정.
- 키보드에 의해 입력 필드가 가려지는 문제를 해결.
5. Modal
- 화면 위에 콘텐츠나 메뉴를 오버레이 형태로 표시할 때 사용.
- 배경을 어둡게 처리하고 중앙에 콘텐츠를 표시.
사용중인 Container 종류
1. 스크린
1) ScreenContainer (SafeAreaView)
- 16px 기본 padding 이 있다.
- 기본 Page 상위 컨테이너로 사용.
- 노치와 같은 부분들에 컨텐츠가 겹치지 않는다.
2) NoOutLineScreenContainer (SafeAreaView)
- 기본 padding 이 없다.
- 기본 Page 상위 컨테이너로 사용.
- 노치와 같은 부분들에 컨텐츠가 겹치지 않는다.
3) NoOutLineFullScreenContainer(View)
- 맨 아래 부분까지 사용하는 Page 상위 컨테이너로 사용.
- Bottom 버튼이 있는 화면.
- 기본 padding 이 없다.
- 노치와 같은 부분들에 컨텐츠가 겹칠수 있다.
2. 컨텐츠
1) ContentContainer(View)
- 컴포넌트 row 영역으로 분리
2) HorizontalContentContainer(View)
- 컴포넌트 column 영역으로 분리
3) OutLineContentContainer(View)
- 컴포넌트 padding 추가해서 row 영역으로 분리
3. 이외
1) ScrollContainer(KeyboardAwareScrollView)
- KeyboardAwareScrollView를 기본 스크롤뷰로 사용.
2) TopNavigationContainer(View)
- 상위 네비게이션에서 사용.
- ios 의 노치부분이 겹치지 않도록 위치.(react-native-status-bar-height)
수정사항
1. Outline 네이밍
: Outline의 의미보다 Padding으로의 쓰임이 큰 컴포넌트로, 이름만 보았을때 헷갈려보였다. padding props를 사용하는 Container를 생성하여 사용하면 좋아보였다.
ScreenContainer --> ScreenContainer
NoOutLineScreenContainer --> SafeAreaScreenContainer
NoOutLineFullScreenContainer --> FullScreenContainer
OutLineContentContainer --> PaddingContentContainer
2. ContentContainer 역할 분리
: 네이밍으로 용도 구별이 가능하도록 분리가 필요해보였다.
ContentContainer: height 'auto'
FixedContainer : 넓이 또는 높이가 고정됨. (props: width, height)
FlexContainer : flex 1 을 기본값으로 변경가능, (props: flex)
+AutoWidthContainer : width 'auto'
3. Margin/Padding 단위 생성
- 일정한 Margin, Padding 을 설정할수 있도록 단위를 설정한다.
xs,s,m,l,xl 또는 sm,base,lg,xl 등등
4. 이외 추가될수 있는 컨테이너
- ModalContainer : Modal이 추가로 쓰일 경우, 일정한 스타일 적용을 위해
- 스타일 Container : Background, Border
