close
프로필 배경
프로필 로고

개발로그

React Native · 2024. 6. 27. fullscreen 넓게보기

[React Native] flex를 활용하여 레이아웃 배치와 정렬하기

컴포넌트는 flexbox를 사용하여 자식 요소들의 레이아웃을 지정할 수 있습니다. flexbox는 다양한 화면 크기에서 일관된 레이아웃을 제공하기 위해 설계되었습니다.

일반적으로 flexDirection, alignItems 및 justifyContent를 조합하여 적절한 레이아웃을 배치할 수 있습니다.

주의사항

react native에서 flexbox는 웹의 CSS와 비슷하게 동작하지만 몇 가지 차이가 있습니다. 기본값이 다르며, flexDirection은 기본적으로 row가 아닌 column으로 설정되고, alignContent는 stretch가 아닌 flex-start로 기본 설정됩니다. flexShrink의 기본값은 1이 아닌 0이며, flex 매개변수는 단일 숫자만 지원합니다.

flex

flex는 요소가 주 축을 따라 사용 가능한 공간을 어떻게 채울지를 정의합니다. 각 요소의 flex 속성에 따라 공간이 분배됩니다. 다음 예제에서 flex:1으로 설정된 컨테이너 뷰 밑으로 빨간색, 주황색, 녹색 뷰를 넣을겁니다. 빨간색 뷰는 flex: 1을 사용하고, 주황색 뷰는 flex: 2를 사용하며, 녹색 뷰는 flex: 3을 사용합니다. 총합이 6이므로 빨간색 뷰는 사용 가능한 공간의 1/6을 차지하고, 주황색은 2/6을 차지하며, 녹색은 3/6을 차지합니다.

import React from 'react';
import {StyleSheet, View} from 'react-native';

const Flex = () => {
  return (
    <View
      style={[
        styles.container
      ]}>
      <View style={{flex: 1, backgroundColor: 'red'}} />
      <View style={{flex: 2, backgroundColor: 'darkorange'}} />
      <View style={{flex: 3, backgroundColor: 'green'}} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

export default Flex;

flex direction

flex direction은 노드의 자식 요소가 배치되는 방향을 제어합니다. 이는 주 축이라고 합니다. 교차 축은 주 축에 수직인 축이며 래핑된 라인이 배치되는 축입니다.

  • column(default): 자식 요소를 위에서 아래로 정렬합니다. 래핑이 활성화된 경우 다음 라인은 컨테이너의 맨 위에 첫 번째 항목의 오른쪽에서 시작합니다.
  • row: 자식 요소를 왼쪽에서 오른쪽으로 정렬합니다. 래핑이 활성화된 경우, 다음 라인은 컨테이너의 맨 왼쪽에서 첫 번째 항목 아래에서 시작합니다.
  • column-reverse: 자식 요소를 아래에서 위로 정렬합니다. 래핑이 활성화된 경우, 다음 라인은 컨테이너의 맨 아래에서 첫 번째 항목의 오른쪽에서 시작합니다.
  • row-reverse: 자식 요소를 오른쪽에서 왼쪽으로 정렬합니다. 래핑이 활성화된 경우, 다음 라인은 컨테이너의 맨 오른쪽에서 첫 번째 항목 아래에서 시작합니다.
import React, {useState, type PropsWithChildren} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import type {PropsWithChildren} from 'react';

const FlexDirectionBasics = () => {
  const [flexDirection, setFlexDirection] = useState('column')
  return (
    <PreviewLayout
        label='flexDirection'
        values={['column','row','row-reverse','column-reverse']}
        selectedValue={flexDirection}
        setSelectedValue={setFlexDirection} >
        <View style={[styles.box, {backgroundColor: 'red'}]}></View>
        <View style={[styles.box, {backgroundColor: 'skyblue'}]}></View>
        <View style={[styles.box, {backgroundColor: 'steelblue'}]}></View>
    </PreviewLayout>
  )
};

type PreviewLayoutProps = PropsWithChildren<{
    label: string;
    values: string[];
    selectedValue: string;
    setSelectedValue: (value: string) => void;
}>

const PreviewLayout = ({
    label,
    values,
    selectedValue,
    setSelectedValue,
    children
}:PreviewLayoutProps) => (
    <View style={{padding: 10, flex: 1}}>
        <Text style={styles.label}>{label}</Text>
        <View style={styles.row}>
            {values.map(value => (
                <TouchableOpacity
                    key={value}
                    onPress={()=> setSelectedValue(value)}
                    style={[styles.button, selectedValue === value && styles.selected]}>
                    <Text
                        style={[styles.buttonLabel, selectedValue === value && styles.selectedLabel]}>
                        {value}
                    </Text>
                </TouchableOpacity>
            ))}
        </View>
        <View style={[styles.container, {[label]:selectedValue}]}>{children}</View>
    </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 8,
    backgroundColor: 'aliceblue',
  },
  box: {
    width: 50,
    height: 50,
  },
  row: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  button: {
    paddingHorizontal: 8,
    paddingVertical: 6,
    borderRadius: 4,
    backgroundColor: 'oldlace',
    alignSelf: 'flex-start',
    marginHorizontal: '1%',
    marginBottom: 6,
    minWidth: '48%',
    textAlign: 'center',
  },
  selected: {
    backgroundColor: 'coral',
    borderWidth: 0,
  },
  buttonLabel: {
    fontSize: 12,
    fontWeight: '500',
    color: 'coral',
  },
  selectedLabel: {
    color: 'white',
  },
  label: {
    textAlign: 'center',
    marginBottom: 10,
    fontSize: 24,
  },
});

export default FlexDirectionBasics;

layout direction

레이아웃 방향은 계층 구조 내에서 자식 및 텍스트가 배치되는 방향을 지정합니다. 또한 start 및 end가 참조하는 방향에도 영향을 미칩니다. 기본적으로 react native는 LTR(왼쪽에서 오른쪽) 레이아웃 방향으로 배치합니다. 이 모드에서는 start는 왼쪽 end는 오른쪽을 참조합니다.

  • LTR(default): 텍스트와 자식 요소는 왼쪽에서 오른쪽으로 배치됩니다. 요소의 시작에 적용된 여백 및 패딩은 왼쪽에 적용됩니다.
  • RTL: 텍스트와 자식 요소는 오른쪽에서 왼쪽으로 배치됩니다. 요소의 시작에 적용된 여백 및 패딩은 오른쪽에 적용됩니다.

justify content

justifyContent는 자식 요소를 컨테이너의 주 축에 따라 어떻게 정렬할지를 정의합니다. 예를 들어, flexDirection이 row로 설정된 컨테이너 내에서 자식을 수평으로 가운데 정렬하거나 flexDirection이 column으로 설정된 컨테이너 내에서 자식을 수직으로 가운데 정렬할 수 있습니다.

  • flex-start(default): 컨테이너의 주 축에서 자식을 컨테이너의 시작 부분에 정렬합니다.
  • flex-end: 컨테이너의 주 축에서 자식을 컨테이너의 끝 부분에 정렬합니다.
  • center: 컨테이너의 주 축에서 자식을 가운데에 정렬합니다.
  • space-between: 자식 사이를 동일하게 공간을 분배하여 컨테이너의 주 축을 따라 배치합니다.
  • space-around: 자식 사이를 동일하게 공간을 분배하여 컨테이너의 주 축을 따라 배치합니다. space-between과 달리 끝 부분 양쪽으로 공간이 분배됩니다.
  • space-evenly: 가장자리 포함해서 모든 간격이 동일하게 분배됩니다.

Align Items

alignItems는 justifyContent와 매우 유사하지만, 주 축이 아닌 교차 축에 자식 요소를 어떻게 정렬할지를 정의합니다.

  • strech(default): 컨테이너의 교차 축을 자식 요소의 높이와 일치하도록 늘립니다.
  • flex-start: 컨테이너의 교차 축에서 자식을 컨테이너의 시작 부분에 정렬합니다.
  • flex-end: 컨테이너의 교차 축에서 자식을 컨테이너의 끝 부분에 정렬합니다.
  • center: 컨테이너의 교차 축에서 자식을 가운데에 정렬합니다.
  • baseline: 컨테이너의 공통 기준선을 따라 자식을 정렬합니다. 

strech가 효과를 발휘하려면 자식 요소가 교차 축을 따라 고정된 자원을 가져서는 안됩니다.

Align Self

alignSelf는 alignItems와 동일한 옵션과 효과를 가지지만, 이 속성을 사용하여 한개의 자식에 대해 부모의 정렬 방식을 재정의할 수 있습니다. alignSelf는 부모가 alignItems로 설정한 옵션을 재정의합니다.

Align Content

alignContent는 교차 축을 따라 여러 줄에 걸쳐 래핑된 요소들의 분포를 정의합니다. 이는 flexWrap을 사용하여 여러 줄에 걸쳐 요소가 래핑될 때에만 효과가 있습니다.

  • flex-start(default): 래핑된 줄을 컨테이너의 교차 축의 시작 부분에 정렬합니다.

  • flex-end: 래핑된 줄을 컨테이너의 교차 축의 끝 부분에 정렬합니다.

  • stretch: 래핑된 줄부터 공간을 균등하게 분배합니다.

  • center: 래핑된 줄을 컨테이너의 교차 축의 가운데에 정렬합니다.

  • space-between: 양쪽으로 보내고 사이를 균등하게 분배합니다.

  • space-around: 양 사이드에 공간을 두고 사이를 균등하게 분배합니다.

  • space-evenly: 양 사이드 포함 공간을 다 균등하게 분배합니다.

felx warp

felxWarp 속성은 컨테이너에 설정되며, 주 축을 따라 자식 요소가 커네이너의 크기를 넘어서는 경우 어떻게 처리할지를 제어합니다. 기본적으로 자식 요소는 단일 줄에 강제로 배치됩니다. 래핑이 허용된 경우 필요에 따라 자식 요소들이 여러 줄로 래핑됩니다.

라인을 래핑할 때 alignContent를 사용하여 라인이 컨테이너에 배치되는 방법을 지정할 수 있습니다.

지정할 수 있는 값으로 warp과 nowarp이 있습니다.

 

flex basis, flex grow, flex shrink

flexBasis는 요소의 주 축을 따라 기본적으로 크기를 제공하는 독립적인 축입니다. flexDirection이 row로 설정된 부모 컨테이너인 경우, flexBasis를 설정하는 것은 해당 자식의 너비를 설정하는 것과 유사합니다. flexDirection이 column으로 설정된 부모 컨테이너인 경우, flexBasis를 설정하는 것은 해당 자식의 높이를 설정하는 것과 유사합니다. flexBasis는 flexGrow 및 flexShrink 계산이 수행되기 전의 수행됩니다.

flexBasis를 50으로 했을경우

 

flexGrow는 컨테이너 내의 공간을 자식 요소들 사이에 얼마나 분배할지를 설명합니다. 자식 요소드을 배치한 후, 컨테이너는 자식 요소들이 지정한 flexGrow 값에 따라 남은 공간을 분배합니다.

2번째 요소만 flexGrow가 2이고 나머지는 1인 경우

flexShrink는 자식 요소들이 주 축을 따라 컨테이너의 크기를 초과하는 경우 어떻게 축소할지를 설명합니다. flexShrink는 flexGrow와 매우 유사하며, 필요한 경우 음수의 남은 공간이 고려됩니다. 이 두 속성은 필요에 따라 자식 요소들이 필요한 만큼 확장 및 축소할 수 있도록 합니다.

row gap, column gap, gap

rowGap은 요소의 행 사이 간격의 크기를 설정합니다.

row gap 20인 경우

columnGap은 요소의 열 사이 간격의 크기를 설정합니다.

columnGap 50

gap은 행과 열 사이 간격입니다.

Absolute & Relative Layout

요소의 position 타입은 부모 요소 내에서 어떻게 위치할지를 정의합니다.

relative 기본적으로 요소는 상대적으로 위치합니다. 이는 요소가 레이아웃의 정상적인 흐름에 따라 배치되고, 그 위치는 top,right, bottom, left의 값에 따라 오프셋됩니다. 이 오프셋은 형제나 부모 요소의 위치에 영향을 미치지 않습니다.

absolute 절대 위치기 지정된 경우 요소는 레이아웃 흐름에 참여하지 않습니다. 대신 형제 요소와 독립적으로 배치됩니다. 위치는 top, right, bottom, elft 값을 기준으로 결정됩니다.

저작자표시 비영리 변경금지

'React Native' 카테고리의 다른 글

[React Native] 컴포넌트 높이와 너비(fixed, flex, percent)  (0) 2024.06.27
[React Native] Style props로 사용하기  (0) 2024.06.27
[React Native] 버전 업그레이드하기  (0) 2024.06.27
[React Native] Typescript 사용하기  (0) 2024.06.27
[React Native] 라이브러리 사용하기  (0) 2024.06.26
React Native 관련 글
더 보기

티스토리툴바