레이아웃 속성

이 속성들에 대한 더 자세한 예제는 플렉스 박스로 레이아웃 구성하기 페이지에서 확인할 수 있다.

다음 예제는 다양한 속성이 React Native 레이아웃에 어떤 영향을 미치는지 보여준다. flexWrap 속성 값을 변경하면서 UI에서 사각형을 추가하거나 제거해 볼 수 있다.

TypeScript

JavaScript

---

참고 자료

Props

alignContent

alignContent는 교차축 방향에서 행의 정렬 방식을 제어하며, 부모 요소의 alignContent를 재정의한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content를 참고한다.

타입	필수 여부
enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly')	아니오

alignItems

alignItems는 자식 요소들을 교차 축 방향으로 정렬한다. 예를 들어, 자식 요소들이 수직으로 배치될 때 alignItems는 수평 정렬을 제어한다. 이 속성은 CSS의 align-items와 동일하게 동작하며, 기본값은 stretch이다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items에서 확인할 수 있다.

타입	필수 여부
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')	아니오

alignSelf

alignSelf는 부모의 alignItems를 재정의하여 자식 요소가 교차 방향(cross direction)에서 어떻게 정렬될지 제어한다. CSS의 align-self와 동일하게 작동하며, 기본값은 auto이다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self를 참고한다.

타입	필수 여부
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')	아니오

aspectRatio

aspectRatio는 노드의 정의되지 않은 차원의 크기를 제어한다. 더 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio를 참고한다.

• 너비나 높이가 설정된 노드에서, aspectRatio는 설정되지 않은 차원의 크기를 제어한다.
• 플렉스 베이스(flex basis)가 설정된 노드에서, aspectRatio는 설정되지 않은 교차 축(cross axis)에서의 노드 크기를 제어한다.
• 측정 함수(measure function)가 있는 노드에서, aspectRatio는 측정 함수가 플렉스 베이스를 측정하는 것처럼 동작한다.
• 플렉스 확장(flex grow)이나 축소(flex shrink)가 설정된 노드에서, aspectRatio는 설정되지 않은 교차 축에서의 노드 크기를 제어한다.
• aspectRatio는 최소/최대 크기(min/max dimensions)를 고려한다.

타입	필수 여부
number, string	아니오

borderBottomWidth

borderBottomWidth는 CSS의 border-bottom-width와 동일하게 동작한다. 자세한 내용은 MDN 문서를 참고한다.

타입	필수 여부
number	아니오

borderEndWidth

방향이 ltr(왼쪽에서 오른쪽)일 때, borderEndWidth는 borderRightWidth와 동일하다. 방향이 rtl(오른쪽에서 왼쪽)일 때, borderEndWidth는 borderLeftWidth와 동일하다.

타입	필수 여부
number	아니오

borderLeftWidth

borderLeftWidth는 CSS의 border-left-width와 동일하게 작동한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width를 참고한다.

타입	필수 여부
number	아니오

borderRightWidth

borderRightWidth는 CSS의 border-right-width와 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width 를 참고한다.

타입	필수 여부
number	아니오

borderStartWidth

방향이 ltr(왼쪽에서 오른쪽)일 때, borderStartWidth는 borderLeftWidth와 동일하다. 방향이 rtl(오른쪽에서 왼쪽)일 때, borderStartWidth는 borderRightWidth와 동일하다.

타입	필수 여부
number	아니오

borderTopWidth는 CSS의 border-top-width와 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width를 참고한다.

타입	필수 여부
number	아니오

borderWidth

borderWidth는 CSS의 border-width와 동일하게 작동한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/border-width를 참고한다.

타입	필수 여부
number	아니오

bottom

bottom은 이 컴포넌트의 하단 가장자리를 오프셋할 논리적 픽셀 수를 나타낸다.

CSS의 bottom과 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위 등 다른 단위는 지원되지 않는다.

bottom이 레이아웃에 미치는 영향에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/bottom을 참고한다.

타입	필수 여부
number, string	아니오

boxSizing은 엘리먼트의 크기 관련 속성(width, height, minWidth, minHeight 등)이 어떻게 계산되는지 정의한다. boxSizing이 border-box로 설정되면, 이 크기들은 엘리먼트의 테두리 박스에 적용된다. content-box로 설정되면, 콘텐츠 박스에 적용된다. 기본값은 border-box이다. 이 속성의 동작 방식을 더 자세히 알고 싶다면 웹 문서를 참고하면 좋다.

타입	필수 여부
enum('border-box', 'content-box')	아니오

columnGap은 CSS의 column-gap과 동일하게 동작한다. React Native에서는 픽셀 단위만 지원한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap를 참고한다.

타입	필수 여부
number	아니오

direction

direction은 사용자 인터페이스의 방향성을 지정한다. 기본값은 inherit이며, 루트 노드의 경우 현재 로캘에 따라 값이 결정된다. 자세한 내용은 https://www.yogalayout.dev/docs/styling/layout-direction에서 확인할 수 있다.

타입	필수 여부	플랫폼
enum('inherit', 'ltr', 'rtl')	아니오	iOS

display

display는 컴포넌트의 표시 유형을 설정한다.

CSS의 display와 유사하게 동작하지만, 'flex'와 'none'만 지원한다. 기본값은 'flex'이다.

타입	필수 여부
enum('none', 'flex')	아니오

end는 ltr(왼쪽에서 오른쪽) 방향일 때 right와 동일하다. rtl(오른쪽에서 왼쪽) 방향일 때는 left와 동일하다.

이 스타일은 left와 right 스타일보다 우선순위가 높다.

타입	필수 여부
number, string	아니오

flex

React Native에서 flex는 CSS와 동일하게 작동하지 않는다. flex는 문자열이 아닌 숫자이며, Yoga 레이아웃 엔진에 따라 동작한다.

flex가 양수일 경우, 컴포넌트는 유연해지고 flex 값에 비례해 크기가 조정된다. 예를 들어, flex가 2로 설정된 컴포넌트는 flex가 1인 컴포넌트보다 두 배의 공간을 차지한다. flex: <양수>는 flexGrow: <양수>, flexShrink: 1, flexBasis: 0과 동일하다.

flex가 0일 경우, 컴포넌트는 width와 height에 따라 크기가 결정되며 유연하지 않다.

flex가 -1일 경우, 컴포넌트는 일반적으로 width와 height에 따라 크기가 결정된다. 하지만 공간이 부족할 경우, 컴포넌트는 minWidth와 minHeight까지 줄어든다.

flexGrow, flexShrink, flexBasis는 CSS와 동일하게 작동한다.

타입	필수 여부
number	아니오

flexBasis

flexBasis는 메인 축을 따라 아이템의 기본 크기를 설정하는 축 독립적인 방식이다. 자식의 flexBasis를 설정하는 것은 부모 컨테이너가 flexDirection: row인 경우 해당 자식의 width를 설정하거나, 부모 컨테이너가 flexDirection: column인 경우 해당 자식의 height를 설정하는 것과 유사하다. 아이템의 flexBasis는 해당 아이템의 기본 크기로, flexGrow와 flexShrink 계산이 수행되기 전의 크기를 의미한다.

타입	필수 여부
number, string	아니오

flexDirection은 컨테이너 내부의 자식 요소들이 배치되는 방향을 제어한다. row는 왼쪽에서 오른쪽으로, column은 위에서 아래로 배치된다. 나머지 두 가지 옵션의 동작도 쉽게 유추할 수 있다. CSS의 flex-direction과 동일하게 작동하지만, 기본값이 column이라는 점이 다르다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction을 참고한다.

타입	필수 여부
enum('row', 'row-reverse', 'column', 'column-reverse')	아니오

flexGrow

flexGrow는 컨테이너 내부의 남은 공간이 주축을 따라 자식 요소들 사이에 어떻게 분배될지 결정한다. 자식 요소들을 배치한 후, 컨테이너는 남은 공간을 자식 요소들의 flexGrow 값에 따라 분배한다.

flexGrow는 0 이상의 부동 소수점 값을 받으며, 기본값은 0이다. 컨테이너는 남은 공간을 자식 요소들의 flexGrow 값에 비례하여 분배한다.

타입	필수 여부
number	아니오

flexShrink

flexShrink는 메인 축에서 자식 요소들의 총 크기가 컨테이너의 크기를 초과할 때, 자식 요소들이 어떻게 축소되는지를 정의한다. flexShrink는 flexGrow와 매우 유사하며, 초과된 크기를 음수의 남은 공간으로 생각하면 같은 방식으로 이해할 수 있다. 이 두 속성은 자식 요소들이 필요에 따라 늘어나거나 줄어들 수 있도록 함께 잘 작동한다.

flexShrink는 0 이상의 부동 소수점 값을 받으며, 기본값은 0이다. 컨테이너는 자식 요소들의 flexShrink 값에 따라 가중치를 부여해 자식 요소들을 축소한다.

타입	필수 여부
number	아니오

flexWrap

flexWrap은 플렉스 컨테이너의 끝에 도달한 후 자식 요소들이 줄바꿈할 수 있는지 여부를 제어한다. 이 속성은 CSS의 flex-wrap과 동일하게 작동하며, 기본값은 nowrap이다. 자세한 내용은 MDN 문서를 참고한다. 단, alignItems: stretch(기본값)와 함께 사용할 수 없으므로, 예를 들어 alignItems: flex-start를 사용해야 한다. 이 변경 사항에 대한 자세한 내용은 React Native v0.28.0 릴리스 노트에서 확인할 수 있다.

타입	필수 여부
enum('wrap', 'nowrap', 'wrap-reverse')	아니오

gap은 CSS의 gap과 동일하게 동작한다. React Native에서는 픽셀 단위만 지원한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/gap을 참고한다.

타입	필수 여부
number	아니오

height

height는 컴포넌트의 높이를 설정한다.

CSS의 height와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위 등 다른 단위는 지원하지 않는다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/height를 참고한다.

타입	필수 여부
number, string	아니오

justifyContent

justifyContent는 자식 요소들을 주축 방향으로 정렬한다. 예를 들어, 자식 요소들이 수직으로 배치될 경우 justifyContent는 수직 정렬을 제어한다. 이 속성은 CSS의 justify-content와 동일하게 작동하며, 기본값은 flex-start이다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content에서 확인할 수 있다.

타입	필수 여부
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')	아니오

left는 이 컴포넌트의 왼쪽 가장자리를 얼마나 오프셋할지 나타내는 논리적 픽셀 값이다.

CSS의 left와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위나 기타 단위는 지원하지 않는다.

left가 레이아웃에 어떻게 영향을 미치는지 더 자세히 알고 싶다면 MDN 문서를 참고한다.

타입	필수 여부
number, string	아니오

margin

margin을 설정하는 것은 marginTop, marginLeft, marginBottom, marginRight를 각각 설정하는 것과 동일한 효과를 가진다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/margin을 참고한다.

타입	필수 여부
number, string	아니오

---

marginBottom은 CSS의 margin-bottom과 동일하게 작동한다. 자세한 내용은 MDN 문서를 참고한다.

타입	필수 여부
number, string	아니오

marginEnd

텍스트 방향이 ltr(좌에서 우)일 때, marginEnd는 marginRight와 동일하게 작동한다. 텍스트 방향이 rtl(우에서 좌)일 때, marginEnd는 marginLeft와 동일하게 작동한다.

타입	필수 여부
number, string	아니요

marginHorizontal

marginHorizontal을 설정하는 것은 marginLeft와 marginRight를 동시에 설정하는 것과 같은 효과를 가진다.

타입	필수 여부
number, string	아니오

marginLeft

marginLeft는 CSS의 margin-left와 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left를 참고한다.

타입	필수 여부
number, string	아니오

marginRight

marginRight는 CSS의 margin-right와 동일하게 작동한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right를 참고한다.

타입	필수 여부
number, string	아니오

marginStart

방향이 ltr(왼쪽에서 오른쪽)일 때, marginStart는 marginLeft와 동일하다. 방향이 rtl(오른쪽에서 왼쪽)일 때, marginStart는 marginRight와 동일하다.

타입	필수 여부
number, string	아니오

marginTop

marginTop은 CSS의 margin-top과 동일하게 작동한다. 더 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top을 참고한다.

타입	필수 여부
number, string	아니오

marginVertical

marginVertical을 설정하는 것은 marginTop과 marginBottom을 동시에 설정하는 것과 같은 효과를 가진다.

타입	필수 여부
number, string	아니오

maxHeight

maxHeight는 이 컴포넌트의 최대 높이를 논리적 픽셀 단위로 지정한다.

CSS의 max-height와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위 등 다른 단위는 지원하지 않는다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/max-height를 참고한다.

타입	필수 여부
number, string	아니오

maxWidth

maxWidth는 이 컴포넌트의 최대 너비를 논리적 픽셀 단위로 지정한다.

CSS의 max-width와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위 등 다른 단위는 지원하지 않는다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/max-width를 참고한다.

타입	필수 여부
number, string	아니오

minHeight는 이 컴포넌트의 최소 높이를 논리적 픽셀 단위로 지정한다.

CSS의 min-height와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위 등 다른 단위는 지원하지 않는다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/min-height를 참고한다.

타입	필수 여부
number, string	아니오

minWidth

minWidth는 이 컴포넌트의 최소 너비를 논리적 픽셀 단위로 지정한다.

CSS의 min-width와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위나 다른 단위는 지원하지 않는다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/min-width를 참고한다.

타입	필수 여부
number, string	아니오

---

overflow는 자식 요소가 측정되고 표시되는 방식을 제어한다. overflow: hidden은 뷰가 잘리게 하고, overflow: scroll은 뷰가 부모의 주축과 독립적으로 측정되도록 한다. 이 속성은 CSS의 overflow와 동일하게 동작하며, 기본값은 visible이다. 더 자세한 내용은 MDN 문서를 참고한다.

타입	필수 여부
enum('visible', 'hidden', 'scroll')	아니오

padding을 설정하는 것은 paddingTop, paddingBottom, paddingLeft, paddingRight를 각각 설정하는 것과 같은 효과를 가진다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/padding을 참고한다.

타입	필수 여부
number, string	아니오

paddingBottom은 CSS의 padding-bottom과 동일하게 작동한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom을 참고한다.

타입	필수 여부
number, string	아니오

paddingEnd

방향이 ltr(왼쪽에서 오른쪽)인 경우, paddingEnd는 paddingRight와 동일하다. 방향이 rtl(오른쪽에서 왼쪽)인 경우, paddingEnd는 paddingLeft와 동일하다.

타입	필수 여부
number, string	아니오

paddingHorizontal은 paddingLeft와 paddingRight를 동시에 설정하는 것과 같다.

타입	필수 여부
number, string	아니오

paddingLeft는 CSS의 padding-left와 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left에서 확인할 수 있다.

타입	필수 여부
number, string	아니오

paddingRight는 CSS의 padding-right와 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right에서 확인할 수 있다.

타입	필수 여부
number, string	아니오

paddingStart

방향이 ltr(왼쪽에서 오른쪽)일 때, paddingStart는 paddingLeft와 동일하다. 반대로 방향이 rtl(오른쪽에서 왼쪽)일 때는 paddingRight와 동일하다.

타입	필수 여부
number, string	아니오

paddingTop

paddingTop은 CSS의 padding-top과 동일하게 작동한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top을 참고한다.

타입	필수 여부
number, string	아니오

paddingVertical은 paddingTop과 paddingBottom을 동시에 설정하는 것과 같다.

타입	필수 여부
number, string	아니오

position

React Native의 position은 일반 CSS와 유사하지만, 기본적으로 모든 값이 relative로 설정된다.

relative는 엘리먼트를 레이아웃의 일반적인 흐름에 따라 배치한다. top, bottom, left, right와 같은 여백 값은 이 레이아웃을 기준으로 상대적으로 이동한다.

absolute는 엘리먼트를 레이아웃의 일반적인 흐름에서 벗어나게 한다. 여백 값은 포함 블록을 기준으로 상대적으로 이동한다.

static은 엘리먼트를 레이아웃의 일반적인 흐름에 따라 배치한다. 여백 값은 아무런 영향을 미치지 않는다. static 엘리먼트는 absolute 자식 엘리먼트의 포함 블록을 형성하지 않는다.

더 자세한 정보는 플렉스 박스를 사용한 레이아웃 문서를 참고한다. 또한, Yoga 문서에서 React Native와 CSS 간의 position 차이점에 대해 더 자세히 확인할 수 있다.

타입	필수 여부
enum('absolute', 'relative', 'static')	아니오

right는 이 컴포넌트의 오른쪽 가장자리를 오프셋할 논리적 픽셀의 수를 나타낸다.

CSS의 right와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em과 같은 다른 단위는 지원되지 않는다.

right가 레이아웃에 어떤 영향을 미치는지 자세히 알아보려면 https://developer.mozilla.org/en-US/docs/Web/CSS/right를 참고한다.

타입	필수 여부
number, string	아니오

rowGap은 CSS의 row-gap과 동일하게 작동한다. React Native에서는 픽셀 단위만 지원한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap를 참고한다.

타입	필수 여부
number	아니오

start는 방향(direction)이 ltr(왼쪽에서 오른쪽)일 때 left와 동일한 의미를 가진다. 반대로 방향이 rtl(오른쪽에서 왼쪽)일 때는 right와 동일한 의미를 가진다.

이 스타일은 left, right, end 스타일보다 우선순위가 높다.

타입	필수 여부
number, string	아니오

top은 컴포넌트의 상단 가장자리를 오프셋하는 논리적 픽셀 수를 나타낸다.

CSS의 top과 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위 등 다른 단위는 지원하지 않는다.

top이 레이아웃에 미치는 영향에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/top을 참고한다.

타입	필수 여부
number, string	아니오

width

width는 이 컴포넌트의 너비를 설정한다.

CSS의 width와 비슷하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위나 기타 단위는 지원되지 않는다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/width를 참고한다.

타입	필수 여부
number, string	아니오

zIndex

zIndex는 어떤 컴포넌트가 다른 컴포넌트 위에 표시될지 제어한다. 일반적으로 zIndex를 사용하지 않는다. 컴포넌트는 문서 트리에서의 순서에 따라 렌더링되기 때문에, 나중에 오는 컴포넌트가 이전 컴포넌트 위에 그려진다. 하지만 애니메이션이나 커스텀 모달 인터페이스와 같이 이런 동작을 원하지 않는 경우에는 zIndex가 유용할 수 있다.

zIndex는 CSS의 z-index 속성과 동일하게 작동한다. 더 큰 zIndex 값을 가진 컴포넌트가 위에 렌더링된다. z축 방향을 휴대폰 화면에서 눈쪽으로 뻗어나가는 것으로 생각하면 된다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index를 참고한다.

iOS에서는 zIndex가 제대로 작동하려면 View들이 서로 형제 관계여야 할 수 있다.

타입	필수 여부
number	아니오