Flexbox 연습: 카드 게임 보드 만들기

최근 open source React Native app에서 화면을 채우기 위해 카드 그리드를 만들어야 했습니다. 최근에 Flexbox에 대해 몇 가지 대화를 나눈 후 이것이 연습을 위한 좋은 빠른 연습이 될 것이라고 생각했습니다.

앱은 다음 참조를 기반으로 합니다. 오늘 할 일은 그리드 레이아웃입니다. 나머지(애니메이션, 사용자 지정 후크 등)는 나중에 다룹니다.



Expo Snack 을 통해 운동을 빠르게 할 수 있습니다.

요구 사항은 다음과 같습니다.

화면의 나머지 부분을 카드로 균등하게 채웁니다(통계 또는 버튼과 같은 다른 UI 요소 다음에).

화면 크기 변경을 위한 크기 조정(예: 웹)

연속 카드 수에 따라 자동으로 레이아웃 조정

Flexbox은 React Native에서 이를 위한 완벽한 도구입니다. 익숙해지는 데 시간이 좀 걸릴 수 있지만 더 편안해지기 시작하는 좋은 연습입니다.

이 실습의 최종 목표는 다음과 같습니다.



다음 코드부터 시작하겠습니다.

import * as React from "react"
import { Text, View, StyleSheet } from "react-native"
import Constants from "expo-constants"

const Card = () => <View style={styles.card} />

export default function App() {
  return (
    <View style={styles.container}>
      <Text>This is top filler</Text>
      <View style={styles.row}>
        <Card />
        <Card />
        <Card />
      </View>
      <View style={styles.row}>
        <Card />
        <Card />
        <Card />
      </View>
      <View style={styles.row}>
        <Card />
        <Card />
        <Card />
      </View>
      <Text>This is bottom filler</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
  },
  row: {},
  card: {
    backgroundColor: "#7ca1b4",
  },
})

우리는 각 행이 수직 공간을 균등하게 채우고 각 카드가 해당 행을 수직으로 채우고 공간을 수평으로 고르게 분할하기를 원합니다.

먼저 컨테이너가 전체 화면을 채우길 원합니다. flex: 1 스타일에 container을 설정하면 됩니다. 일시적으로 배경색을 설정하면 가장 잘 시각화됩니다.

// ...

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    flex: 1,
    backgroundColor: "green",
  },
  row: {},
  card: {
    backgroundColor: "#7ca1b4",
  },
})

이제 row 에 화면의 나머지 부분을 고르게 분할하도록 지시해야 합니다( flex: 1 을 통해).

// ...

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    flex: 1,
    backgroundColor: "green",
  },
  row: {
    flex: 1,
    backgroundColor: "blue",
    marginVertical: 5,
  },
  card: {
    backgroundColor: "#7ca1b4",
  },
})

각 행에는 flex: 1이 있기 때문에 렌더링 엔진은 각 행이 사용 가능한 공간의 1/3을 차지해야 한다는 것을 알고 있습니다. 한 행에 flex: 2이 있는 경우 flex: 1은 영역의 1/5을 차지하고 flex: 2은 영역의 2/5를 차지합니다.

다음으로 우리는 카드가 나머지 공간을 채우고 균등하게 공유하기를 원합니다. 다시 우리는 flex: 1 을 활용할 것입니다.

// ...

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    flex: 1,
    backgroundColor: "green",
  },
  row: {
    flex: 1,
    backgroundColor: "blue",
    marginVertical: 5,
  },
  card: {
    backgroundColor: "#7ca1b4",
    flex: 1,
    margin: 5,
  },
})

이제 카드가 올바르게 렌더링되지 않습니다. 우리는 그것들이 수평으로 렌더링되기를 원하지만 여전히 공간을 균등하게 분할합니다. flexDirection: 'row' 스타일에 row을 사용하여 이 작업을 수행할 수 있습니다. 기본적으로 React Native의 Flexbox는 flex 방향을 열로 설정합니다. 자리 표시자 배경색도 제거합니다.

// ...

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight,
    flex: 1,
  },
  row: {
    flex: 1,
    marginVertical: 5,
    flexDirection: "row",
  },
  card: {
    backgroundColor: "#7ca1b4",
    flex: 1,
    margin: 5,
  },
})

레이아웃을 관리하기 위해 flexbox를 사용하고 있기 때문에 화면 크기에 관계없이 화면을 올바르게 채우고 화면 크기가 변경되면 자동으로 크기가 조정된다는 것을 확신할 수 있습니다.



이것은 Flexbox로 레이아웃을 연습하는 매우 간단한 연습이었습니다. 더 알고 싶으시면 in depth article on Flexbox over on LogRocket을 더 썼습니다.