[개발자가 알려주는 프레이머(Framer) #2] Stack 컴포넌트 완벽정리

1강에서는 프레임(Frame) 컴포넌트에 대해서 다뤄봤습니다. 프레임 컴포넌트 자체로도 제공하고 있는 기능들이 정말 많고, 다양한 곳에서 활용할 수 있음을 확인했습니다. 이번 포스팅에서 소개드릴 스택(Stack) 컴포넌트도 정말 유용하게 사용할 수 있습니다.

스택(Stack) ?

스택 컴포넌트를 활용하면 프레임을 사용하여 매우 유연하고 자동으로 분산된 레이아웃을 쉽게 만들 수 있습니다. 설명으로는 잘 이해가 안되시죠. CSS의 flex 속성을 활용해서 자동으로 간격이나 위치를 조정해줍니다.

스택 컴포넌트는 프레임을 기반으로하므로 모든 프레임 속성을 지원합니다!

좀 더 쉽게 이해하시려면 "프레임을 좀 더 간편하게 레이아웃을 구성하기 위해서 스택이 존재하는 구나" 라고 생각하시면 될 것 같습니다.

스택에 프레임을 추가하면 스택은 자동으로 프레임을 크기에 맞게 배치시킵니다. 간격이나 패딩 속성들도 쉽게 변경할 수 있습니다. 

<Stack size={100}>
  <Frame background="red" size={25} radius="50%" />
  <Frame background="#blue" size={25} radius="50%" />
  <Frame background="purple" size={25} radius="50%" />
  <Frame background="white" size={25} radius="50%" />
</Stack>

이렇게 자동으로 스택 사이즈에 맞게 프레임이 배치됩니다!

스택 사이즈에 맞게 프레임 컴포넌트가 배치되는 예시

Content

direction: StackDirection

스택의 방향을 정할 수 있습니다. 수직(vertical), 수평(horizontal)으로 정할 수 있습니다. 기본값은 수직(vertical)입니다.

// 수직
<Stack direction="vertical" />

// 수평
<Stack direction="horizontal" />

스택의 방향을 변경하는 예시

gap: number

스택 내부에서 아이템들 끼리의 거리를 결정하는 속성입니다. 기본값은 10입니다.

<Stack gap={120} />

gap 속성의 동작 예시

alignment: StackAlignment

스택 내부의 컨텐츠의 일치선을 조정할 수 있습니다. alignment의 값은 start, center 그리고 end로 설정할 수 있습니다. 기본값은 center입니다.

<Stack alignment="start" />
<Stack alignment="center" />
<Stack alignment="end" />

alignment 속성을 조정하는 예시

distribution: StackDistribution

스택 컨텐츠를 어떻게 배치할지에 대해서 정의하는 속성입니다. 기본값은 space-around 입니다.

• "start" — 아이템들의 시작점으로 맞춥니다.

• "center" — 아이템들의 중앙으로 맞춥니다.

• "end" — 아이템들의 끝점으로 맞춥니다.

• "space-between" — 아이템들의 사이(between)에 균일한 간격을 만들어 줍니다.

• "space-around" — 아이템들의 둘레(around)에 균일한 간격을 만들어 줍니다.

• "space-evenly" — 아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다.

start, center, end 동작 예시

space-between, space-around, space-evenly 동작 예시

아래 이미지를 참고하시면 훨씬 이해하시기 쉽습니다.

내부 프레임의 위치를 좀 더 시각적으로 보기 편하게 백그라운드를 깔았습니다.

space-between, space-around, space-evenly

space-between은 아이템들의 사이의 간격이 균일하게 적용되어 있음을 확인할 수 있습니다.

space-arorund는 둘레에 균일한 값이 적용되어 있음을 볼 수 있습니다. 아이템 바깥쪽의 간격의 합(맨 위쪽, 맨 아래쪽)이 아이템들의 사이값과 같습니다.

space-evenly은 아이템 바깥쪽의 간격까지 아이템 사이의 간격과 동일하게 적용시킵니다.

Padding

padding: number

스택 주위에 패딩값을 설정할 수 있습니다. 기본값은 0입니다.

개별적으로 paddingTop, paddingLeft, paddingRight and paddingBottom으로 설정해서 사용할수도 있습니다.

// 한번에
<Stack padding={20} />

// 개별적으로
<Stack paddingTop={20} />
<Stack paddingRight={20} />
<Stack paddingBottom={20} />
<Stack paddingLeft={20} />

padding 값을 적용하는 예시

마무리

스택 컴포넌트는 프레임 컴포넌트를 상속해서 레이아웃을 좀 더 쉽게 사용할 수 있게 만들어졌습니다. 기존에 레이아웃 작업을 할 때 굉장히 번거로운 부분들이 많았는데 스택 컴포넌트는 매우 간편하게 요소들을 배치하고 구성할 수 있는 기능들을 제공하고 있습니다. Frames 속성 + 스택 레이아웃 속성이라 좀 더 다양한 속성들을 알고 싶으시다면 프레임 API를 살펴보시는 걸 추천합니다. 프레임 속성과 관련된 부분은 여기에서 쉽게 확인할 수 있습니다.