[React Native] 03-4 컴포넌트 배치 관련 스타일 속성 탐구하기

flex:1 과 height: '100%'의 차이

const styles = StyleSheet.create({
  view: {
    flex: 1,
    height: '100%',
    padding: 5,
    backgroundColor: MD2Colors.lightBlue500,
  },
  text: {fontSize: 20, color: 'white'},
})

flex: 1 ➡️ 형제 요소의 높이가 반영된 부모 컴포넌트의 높이의 여분을 가져옴

height: '100%' ➡️ 형제 요소의 높이와 무관하게 부모 컴포넌트의 높이를 모두 가져옴

✅루트 view의 Dimensions.get('window').height 와 같은 것

 

<스타일 속성 정리>

 

flexDirection 스타일 속성

부모 컴포넌트가 고정일 때 자식 컴포넌트를 자신의 영역에 배치하는 기법

➡️ 'row' (가로) 와 'column'(세로) 으로 설정할 수 있음

✅ 기본값은 'column'

 

alignItems 스타일 속성

부모 요소의 높이나 넓이에 여분이 있을 때 이 여분을 이용하여 자식 요소의 배치 간격을 조정할 수 있음

➡️ left, center, right, stretch

 

justifyContent 스타일 속성

컴포넌트 사이의 공간 넓이를 분배하는 방법

➡️ flex-start, center, flex-end, space-around, space-between, space-evenly

 

flexWrap 스타일 속성

컴포넌트들이 화면 안에 제대로 들어오도록 사용

➡️ nowrap, wrap, wrap-reverse

✅ 기본값은 nowrap

 

overflow 스타일 속성

전체 콘텐츠의 크기가 컴포넌트 크기보다 클 때 이를 어떻게 할지 결정하는 데 사용하는 속성

➡️ visible, hidden, scroll

✅ 기본값은 visible  🔆 컴포넌트 바깥쪽으로도 렌더링됨

✅ scroll 을 설정한다고 스크롤 효과가 발생하는 것은 XX

 

ScrollView의 contentContainerStyle 속성

• ScrollView는 style 뿐만 아니라 contentContainerStyle 속성도 제공함
• ➡️ 스크롤 대상 콘텐츠 컴포넌트에 적용되는 속성

✅ flex 속성은 사용하지 않아야 스크롤이 정상 작동함

 

left, right top, bottom 과 position 스타일 속성

컴포넌트가 렌더링되는 위치를 바꾸고 싶을 때 사용

✅ position 스타일 속성값을 'absolute'로 지정해야 함

ex) left: 10으로 설정 시 컴포넌트 왼쪽을 기준으로 10픽셀 오른쪽으로 이동/ right: 10으로 설정 시 컴포넌트 오른쪽을 기준으로 10픽셀 왼쪽으로 이동

 

 

<화면에 뜬 효과 주는 법>

 

화면에 뜬 효과를 주려면 아이콘이 SafeAreaView의 자식 컴포넌트이면 안됨

 

✅ Fragment 컴포넌트를 사용

import React, {Fragment} fron 'react'

➡️ 실제 존재하지는 않지만 XML 문법이 요구하는 부모 컴포넌트로 동작하도록 만들어진 컴포넌트

➡️ <Fragment> </Fragment> 대신 <></>으로 단축 사용 가능