앱인토스 개발자센터 로고

Stack ​

지원환경: React NativeReact Native SDKv1.0.3
실행환경: Toss AppSandbox App

Stack은 자식 요소를 가로 또는 세로 방향으로 일정 간격을 두고 배치하는 레이아웃 컴포넌트예요.
direction 속성으로 방향을 설정하고, gutter 속성으로 요소 간 간격을 조절할 수 있어요.
가로 배치는 Stack.Horizontal, 세로 배치는 Stack.Vertical로 간편하게 사용할 수 있어요.

시그니처 ​

typescript
Stack: StackType

파라미터 ​

  • propsobject

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

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

      자식 요소의 배치 방향이에요. 기본값은 'vertical'이에요.

    • props.gutternumber | ReactElement

      요소 간 간격이에요. 숫자를 입력하면 픽셀 단위 여백, 컴포넌트를 넣으면 해당 컴포넌트를 간격으로 사용해요.

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

      교차축(가로 또는 세로) 기준 정렬이에요.

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

      메인축(가로 또는 세로) 기준 정렬이에요.

예제 : 가로·세로 방향으로 배치하기 ​

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

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>
    </>
  );
}

가로로 배치하기 (Stack.Horizontal) ​

지원환경: React NativeReact Native SDKv1.0.3
실행환경: Toss AppSandbox App

Stack.Horizontal은 자식 요소를 가로 방향으로 쌓아 배치해요.
gutter 속성으로 간격을 설정해 일정한 가로 레이아웃을 유지할 수 있어요.

예제 ​

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

function StackHorizontalExample() {
  return (
       <Stack.Horizontal gutter={16}>
        <Text>16간격을 두고 가로 방향으로 배치해요</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Stack.Horizontal>
  );
}

세로로 배치하기 (Stack.Vertical) ​

지원환경: React NativeReact Native SDKv1.0.3
실행환경: Toss AppSandbox App

Stack.Vertical은 자식 요소를 세로 방향으로 쌓아 배치해요.
gutter 속성으로 요소 간의 간격을 쉽게 제어할 수 있어요.

예제 ​

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

function StackVerticalExample() {
  return (
       <Stack.Vertical gutter={16}>
        <Text>16간격을 두고 세로 방향으로 배치해요</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Stack.Vertical>
  );
}

참고사항 ​

  • Stack은 Flexbox 기반으로 구성되어 있어요.
  • gutter를 통해 일정한 간격을 유지할 수 있고, React 컴포넌트를 전달해 커스텀 간격도 만들 수 있어요.
  • Stack.Horizontal과 Stack.Vertical을 사용하면 가로·세로 레이아웃을 더 간결하게 구성할 수 있어요.