# HStack
URL: /lynx/foundation/layout/h-stack
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/foundation/layout/h-stack.mdx

HStack 컴포넌트는 Lynx에서 자식 요소를 가로 방향으로 쌓는 레이아웃 컴포넌트입니다.

## Installation

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

## Usage

```tsx
import { Box, HStack, Text } from "@seed-design/lynx-react";

export function App() {
  return (
    <HStack gap="x2" align="center" justify="spaceBetween">
      <Box bg="bg.brandWeak" borderRadius="r2" px="x3" py="x2">
        <Text textStyle="t3Bold" color="fg.brand">
          A
        </Text>
      </Box>
      <Box bg="bg.positiveWeak" borderRadius="r2" px="x3" py="x2">
        <Text textStyle="t3Bold" color="fg.positive">
          B
        </Text>
      </Box>
    </HStack>
  );
}
```

`HStack`은 Lynx 네이티브 `<view>`를 직접 렌더링하며 `display="flex"`와 `flexDirection="row"`를 기본 적용합니다. `Box`를 내부에서 합성하지 않아 반복 렌더링에서 primitive 컴포넌트 단계를 줄입니다.

<Callout type="warning">
  성능에 민감한 반복 레이아웃을 앱 코드에서 구성할 때는 native `<view>`/`<text>`에 Tailwind utility className을 직접 사용하는 방식을 우선 고려하세요. 패키지 컴포넌트 내부에서는 native tag와 recipe className을 사용하고, inline style은 런타임 값이 필요한 경우에만 제한적으로 사용합니다.
</Callout>

## Props

## Layout Aliases

`HStack`은 `VStack`과 동일한 alias를 제공합니다.

| Prop      | 적용되는 style       |
| --------- | ---------------- |
| `align`   | `alignItems`     |
| `justify` | `justifyContent` |
| `wrap`    | `flexWrap`       |
| `grow`    | `flexGrow`       |
| `shrink`  | `flexShrink`     |

가로 방향에서 줄바꿈이 필요하면 `wrap`을 사용합니다.

```tsx
<HStack gap="x2" wrap>
  <Box px="x3" py="x1" borderRadius="full" bg="bg.neutralWeak">
    <Text>chip</Text>
  </Box>
  <Box px="x3" py="x1" borderRadius="full" bg="bg.neutralWeak">
    <Text>chip</Text>
  </Box>
</HStack>
```

## 웹 버전과의 차이

<Callout type="warning">
  Lynx `HStack`은 React `HStack`과 다음과 같은 차이가 있습니다.

  - `as`, `asChild`를 지원하지 않습니다. 항상 Lynx 네이티브 `<view>`를 렌더링합니다.
  - `Stack`이라는 deprecated alias는 제공하지 않습니다. Lynx에서는 `VStack` / `HStack`을 명시적으로 사용합니다.
  - 지원하지 않는 StyleProps는 `Box`와 동일하게 열지 않습니다.
</Callout>