React Native에서 Flexbox를 사용하는 방법

Flexbox는 유연한 1차원 레이아웃을 구축할 수 있는 CSS 도구입니다. 컨테이너 내에서 요소의 위치를 제어할 수 있으므로 화면에 콘텐츠를 표시할 때 더 많은 제어를 할 수 있습니다.

이 튜토리얼에서는 React Native에서 플렉스박스를 사용해 유연하고 반응이 빠른 레이아웃을 만드는 방법을 보여줍니다. 플렉스박스 프로퍼티를 사용해 컨테이너 엘리먼트의 자식 항목을 배치하는 방법을 배웁니다.

React Native와 웹 개발에서의 플렉스박스 동작 비교

일반 CSS에서 플렉스박스를 사용해 컨테이너 엘리먼트의 콘텐츠를 구성하려면 display:flex 프로퍼티를 사용해야 합니다.

 container { display: flex; } 

하지만 React Native를 사용하면 display:flex 프로퍼티를 설정할 필요가 없습니다. React Native는 기본적으로 플렉스박스를 사용해 레이아웃을 빌드하기 때문입니다.

다음은 웹 애플리케이션에서 HTML 요소를 정렬하는 데 플렉스박스를 사용할 때와 React Native에서 작동하는 방식에 대해 명심해야 할 몇 가지 차이점입니다.

⭐ flexDirection 는 웹 애플리케이션에서 기본적으로 행 이지만 React Native에서는 열 로 기본값이 지정됩니다.

⭐ alignContent 는 웹 애플리케이션에서 기본값은 stretch 이고 React Native에서는 flex-start 입니다.

⭐ flexShrink 의 기본값은 웹에서는 1, React Native에서는 0입니다.

React Native에서 Flexbox 속성 사용

Flexbox 속성을 사용하면 컨테이너 엘리먼트의 자식 엘리먼트를 정렬하는 방법을 설명할 수 있습니다. 애플리케이션의 필요에 맞는 복잡한 레이아웃을 만들려면 이러한 프로퍼티를 이해해야 합니다.

React Native에서 플렉스 프로퍼티 사용하기

플렉스 프로퍼티는 뷰 컴포넌트가 화면을 채우는 방식을 결정합니다. 이 속성은 보기 컴포넌트가 차지해야 하는 화면의 비율을 지정하는 값으로 이보다 큰 정수 값을 허용합니다.

이 예제에서는 React Native 컴포넌트 라이브러리에서 단일 뷰가 있는 화면을 만들고 있습니다:

 import React from "react"
import { StyleSheet, View } from "react-native"

export default function App() {
  return (
    <>
      <View style={{ backroundColor: "#A020F0", flex: 1}} /> 
    </>
  )
} 

출력은 다음과 같습니다:

여기서는 View 컴포넌트의 플렉스 값으로 1을 할당했습니다. 공간을 하나의 그룹으로 분할했기 때문에 보기 컴포넌트가 전체 화면(100%)을 차지합니다.

다른 예를 살펴보겠습니다.

 import React from "react"
import { StyleSheet, View } from "react-native"

export default function App() {
  return (
    <View>
      <View style={{ backroundColor: "#A020F0", flex: 1}} />
      <View style={{ backgroundColor: "#7cb48f", flex: 3 }} /> 
    </View>
  )
} 

결과는 다음과 같습니다:

여기에는 두 개의 보기 요소가 다른 보기 요소 안에 있습니다. 첫 번째 자식은 flex:1 로 설정되고 두 번째 자식은 flex:3 로 설정됩니다. 이 값은 두 자식 사이의 공간을 분할합니다. 첫 번째는 화면의 1/4을 차지하고 두 번째는 화면의 3/4을 차지합니다(1+3 = 4이므로 화면은 4개의 블록으로 분할됩니다).

React Native에서 flexDirection 속성 사용하기

위의 스크린샷을 보면 자식 요소들이 서로 위에 있는 것을 볼 수 있습니다. 이것이 React Native에서 플렉스박스의 기본 동작입니다( flexDirection 은 열 값으로 기본 설정됨).

flexDirection 속성을 행 , 열 반대 , 행 반대 로 설정할 수도 있습니다 . 다음 예제에서는 flexDirection 가 row 으로 설정되어 있으므로 하위 요소가 나란히 배치됩니다.

 import React from "react"
import { StyleSheet, View } from "react-native"

const styles = StyleSheet.create({
 container: {
   backgroundColor: "#00FF00",
   flex: 1,
   alignItems: "center",
   flexDirection: "row",
 },
 square: {
   backgroundColor: "#FF0000",
   width: 98,
   height: 98,
   margin: 4,
 },
});

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.square} />
      <View style={styles.square} />
      <View style={styles.square} />
    </View>
  )
}
 

결과는 다음과 같습니다.

flexDirection 을 row-reverse 으로 설정하면 하위 요소가 나란히 배치되지만 순서가 뒤바뀝니다. 마찬가지로 열-반전 은 자식을 서로 위에 배치하지만 열 에 정의된 순서와 반대 순서로 배치합니다.

React Native에서 justifyContent 사용

justifyContent 속성은 플렉스박스 컨테이너의 자식 요소를 주 축을 따라 정렬합니다. flexDirection 이 열 으로 설정된 경우 주 축은 세로 축입니다. 행 로 설정된 경우 가로 축이 됩니다.

justifyContent 의 가능한 값은 플렉스 시작 , 플렉스 끝 , 중앙 , 공간 사이 , 공간 주변 , 공간 균등 입니다.

다음 예제에서는 flexDirection 이 row로 설정되고 justifyContent 가 flex-start :

 import React from "react"
import { StyleSheet, View } from "react-native"

const styles = StyleSheet.create({
 container: {
   backgroundColor: "#00FF00",
   flex: 1,
   justifyContent: "flex-start",
   flexDirection: "row",
 },
 square: {
   backgroundColor: "#FF0000",
   width: 98,
   height: 98,
   margin: 6,
 },
});

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.square} />
      <View style={styles.square} />
      <View style={styles.square} />
    </View>
  )
}
 

으로 설정된 출력입니다:

flexDirection 를 열로 변경하면 , flex-start 가 세로축에 적용됩니다. 따라서 상자는 서로 겹쳐서 쌓이게 됩니다.

justifyContent 를 가운데로 설정(주 축은 열 )하면 세 개의 자식 상자가 가운데에 배치됩니다.

React Native에서 alignItems 사용

alignItems 속성 는 보조 축을 따라 플렉스박스 컨테이너에 있는 항목의 배치를 결정합니다. 이는 justifyContent 와 반대입니다. justifyContent 가 세로 정렬을 처리하는 것처럼 alignItems 은 가로 정렬을 처리합니다. alignItems 의 가능한 값은 flex-start , flex-end , center 및 baseline 입니다.

다음 예제에서는 flexDirection 가 row 로 설정되고 alignItems 이 flex-start :

 import React from "react"
import { StyleSheet, View } from "react-native"

const styles = StyleSheet.create({
 container: {
   backgroundColor: "#00FF00",
   flex: 1,
   alignItems: "flex-start",
   flexDirection: "row",
 },
 square: {
   backgroundColor: "#FF0000",
   width: 98,
   height: 98,
   margin: 6,
 },
});

export default function App() {
  return (
    <View style={styles.container}/>
      <View style={styles.square} />
      <View style={styles.square} />
      <View style={styles.square} />
      <View style={styles.square} />
    </View>
  )
}
 

출력은 다음과 같습니다:

flexDirection 속성을 열 및 alignItems ~ 가운데 로 설정하면 상자가 서로 위에 배치되고 하위 요소가 가운데에 정렬됩니다.

React Native에서 alignSelf 사용

alignSelf 프로퍼티는 컨테이너에서 개별 자식이 어떻게 정렬되어야 하는지를 결정합니다. 이 프로퍼티는 alignItems 를 재정의하며, 가능한 값은 flex-start , flex-end , center , baseline 입니다.

다음 예제에서는 기본 alignItems 속성을 설정하고 alignSelf :

 import React from "react"
import { StyleSheet, View } from "react-native"

const styles = StyleSheet.create({
 container: {
   backgroundColor: "#00FF00",
   flex: 1,
   alignItems: "center", 
   justifyContent: "center", 
   flexDirection: "row",
 },
 square: {
   backgroundColor: "#FF0000",
   width: 98,
   height: 98,
   margin: 6,
 },
});

export default function App() {
  return (
    <View style={styles.container}/>
      <View style={styles.square} />
      <View style={[styles.square, { alignSelf: "flex-end" }]} />
    <View style={[styles.square, { alignSelf: "flex-start" }]} /> 
  )
}
 

을 사용하여 이를 재정의합니다:

기타 플렉스박스 속성

React Native에서 플렉스박스 레이아웃을 만들 때 사용할 수 있는 다른 두 가지 속성이 있습니다:

⭐ flexWrap : 컨테이너의 자식들이 넘쳐나는 경우에 대비해서요. flexWrap 을 사용하여 한 줄로 축소할지 아니면 여러 줄로 감쌀지 지정합니다. flexWrap 에 사용할 수 있는 값은 nowrap 및 wrap 입니다.

⭐ 간격 : 간격 속성을 사용하여 컨테이너의 그리드 항목 사이에 간격을 추가합니다. 이 값은 항목 사이에 원하는 간격의 크기여야 합니다. 간격 속성은 px, em 또는 rem과 같은 CSS 단위를 사용하여 지정할 수 있습니다.

React Native에 대해 자세히 알아보기

이제 플렉스박스를 이해하고 React Native 앱에서 플렉스박스를 사용하여 유연하고 반응이 빠른 레이아웃을 만드는 방법을 알았으니, 이제 React Native의 핵심을 살펴볼 차례입니다.