Stack

Stack은 자식 요소들을 Stack 방식으로 가로 혹은 세로로 배치하고, 자식 요소 사이에 간격을 설정할 수 있는 컴포넌트예요. direction 속성으로 가로(horizontal) 또는 세로(vertical) 방향을 지정할 수 있고, 자식 요소들 사이의 간격을 gutter 속성으로 조절할 수 있어요. 가로로 배치할 때는 Stack.Horizontal, 세로로 배치할 때는 Stack.Vertical 컴포넌트를 사용할 수 있어요.

시그니처

Stack: StackType

파라미터

• propsobject
  

  컴포넌트에 전달되는 props 객체예요.

  • props.align'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
    

    중심축 기준(Flex 방향)으로 자식 요소를 정렬하는 설정 값이에요. 'column' 방향을 예로 들면 'center'는 수평 중앙에 배치하고, 'stretch'는 요소의 폭이 'auto'인 경우 부모의 폭에 맞게 늘려요. 이 값은 `alignItems`에 적용돼요.

  • props.justify'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
    

    교차축(Flex 방향의 교차 방향) 기준으로 자식 요소를 정렬하는 설정 값이에요. 'column' 방향을 예로 들어, flex-start는 요소를 부모의 위쪽에 배치하고, 'center'는 부모의 수직 중앙에 배치해요. 이 값은 `justifyContent`에 적용돼요.

  • props.direction'vertical' | 'horizontal' · 'vertical'
    

    자식 요소를 배치할 방향을 설정하는 값이에요. 기본값은 'vertical'이에요.

  • props.gutternumber | ReactElement
    

    자식 요소 간의 간격을 설정하는 값이에요. 숫자를 입력하면 픽셀 단위로 여백을 설정하고, ReactElement를 전달하면 해당 컴포넌트가 간격으로 사용돼요. 숫자를 사용하면 간격을 정확하게 제어할 수 있고, ReactElement를 사용하면 더 복잡한 커스텀 간격을 구현할 수 있어요.

프로퍼티

• HorizontalStackHorizontal
  

  Stack.Horizontal은 자식 요소들을 가로 방향으로 정렬하여 쌓는 컴포넌트예요.

• VerticalStackVertical
  

  Stack.Vertical은 자식 요소들을 세로 방향으로 정렬하여 쌓는 컴포넌트예요.

예제

가로, 세로 방향으로 요소들을 배치하고 간격을 16으로 설정한 예제예요.

import { Text } from 'react-native';
import { Stack } from '@granite-js/react-native';

export function StackExample() {
  return (
    <>
      <Stack gutter={16} direction="horizontal">
        <Text>16간격을 두고 가로 방향으로 배치해요</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Stack>
      <Stack gutter={16} direction="vertical">
        <Text>16간격을 두고 세로 방향으로 배치해요</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Stack>
    </>
  );
}