---
title: "React 스크롤 탭 — Material UI 불필요"
description: "React에서 네이티브 스크롤로 만드는 스크롤 탭: 활성 탭이 스스로 중앙 정렬되고, 화살표는 필요할 때만 나타나며, 탭 콘텐츠는 자유 형식입니다. 라이브 데모와 소스 제공."
canonical: "https://react-horizontal-scrolling-menu.dev/ko/scrollable-tabs"
image: "https://react-horizontal-scrolling-menu.dev/og.png"
---

# 브라우저처럼 스크롤되는 React 스크롤 탭

탭 스트립은 제품이 탭 6개를 넘어서는 순간 더 이상 맞지 않게 됩니다. 해결책은 폰트를 줄이는 것이 아니라 스크롤되는 스트립입니다: 오버플로는 브라우저가 처리하고, 탭을 클릭하면 중앙으로 정렬되며, 화살표는 갈 곳이 있을 때만 나타납니다.

Overview

Getting started

Visibility

Arrows

Drag to scroll

RTL

apiRef

Helpers

TypeScript

Testing

Changelog

FAQ

가장자리 근처의 탭을 클릭해보세요 — 스스로 중앙으로 스크롤됩니다.

[이 예제를 Storybook에서 라이브 편집](https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-centeronclick--center-on-click)

## 중요한 단 하나의 동작: 선택 시 중앙 정렬

스크롤 탭 스트립의 성패는 가장자리에 있는 탭을 클릭했을 때 일어나는 일에 달려 있습니다: 양옆의 이웃 탭이 드러나도록 가운데로 부드럽게 이동해야 합니다. 여기서는 호출 하나로 끝납니다 — `scrollToItem(el, 'smooth', 'center')` — [center-on-click 예제](https://react-horizontal-scrolling-menu.dev/ko/examples/center-on-click.md)에 연결되어 있습니다. 마운트 시 활성 탭을 복원하는 것도 같은 호출에 `'auto'`를 사용하며, [위치 저장 및 복원](https://react-horizontal-scrolling-menu.dev/ko/examples/save-restore-position.md)에서 보여줍니다.

화살표는 같은 가시성 데이터에서 나옵니다: `useLeftArrowVisible`은 첫 번째 탭이 화면 밖에 있을 때만 false이므로, 왼쪽 화살표는 정확히 필요할 때 렌더링됩니다. 별도의 측정 코드도, 직접 만든 리사이즈 옵저버도 필요 없습니다.

## MUI 스크롤 탭이 부족해지고 있다면

Material UI의 `variant="scrollable"` 탭은 Material 디자인 시스템 안에서는 올바른 답입니다 — 여러분의 "탭"이 더 이상 탭이 아니게 되기 전까지는요. MUI는 스트립을 Tabs 시맨틱에 용접해 놓았습니다: `value`/`onChange` 쌍, 탭 패널, 그리고 MUI가 모바일에서 기본으로 숨기는 스크롤 버튼까지. 행에 칩, 카드, 아바타 또는 혼합 콘텐츠가 들어가거나 드래그 스크롤이 필요하거나 어떤 항목이 보이는지 알아야 하는 순간, 여러분은 컴포넌트를 사용하는 게 아니라 컴포넌트와 싸우게 됩니다.

이 라이브러리는 그 아래 계층입니다: 가시성 추적이 있는 스크롤 행이며, "탭"이 무엇이어야 하는지에 대한 의견이 없습니다. 여러분의 탭은 `itemId`를 가진 모든 컴포넌트일 수 있습니다 — Tailwind, MUI 자체의 `styled`, 또는 순수 CSS로 스타일링하세요. 선택 상태는 위 데모가 하나의 `useState`에 보관하는 것처럼 온전히 여러분의 몫입니다.

## 접근성은 대부분 공짜입니다 — 두 가지 빈틈만 주의하세요

스트립이 네이티브 스크롤 컨테이너이기 때문에 키보드 포커스, 스크린 리더 읽기 순서, RTL은 모두 플랫폼에서 제공됩니다 — 탭 사이로 포커스를 이동하면 코드 한 줄 없이도 해당 탭이 화면에 스크롤되어 들어오고, [RTL](https://react-horizontal-scrolling-menu.dev/ko/examples/rtl.md)도 별도 설정이 필요 없습니다. 다른 탭 UI와 마찬가지로 두 가지는 여전히 여러분의 몫입니다: ARIA 패턴을 직접 선택하고(실제 패널이 전환된다면 `role="tablist"`, "탭"이 내비게이션이라면 `aria-current`), [드래그 스크롤](https://react-horizontal-scrolling-menu.dev/ko/examples/mouse-drag.md) 레시피의 클릭 억제 로직을 유지해 드래그를 놓았을 때 탭이 활성화되지 않도록 해야 합니다.

## 패턴, 최소 구성

탭은 `itemId`를 가진 평범한 버튼이며, 선택하면 중앙으로 정렬됩니다. 이것이 전부입니다 — 위 데모는 여기에 스타일링과 드래그를 더한 것입니다.

ScrollTabs.tsx

```
function ScrollTabs({ tabs }: { tabs: string[] }) {
  const [active, setActive] = React.useState(tabs[0]);
  return (
    <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
      {tabs.map((tab) => (
        <Tab itemId={tab} key={tab} label={tab}
          active={tab === active} onSelect={() => setActive(tab)} />
      ))}
    </ScrollMenu>
  );
}

function Tab({ itemId, label, active, onSelect }: TabProps) {
  const api = React.useContext<publicApiType>(VisibilityContext);
  return (
    <button
      aria-current={active}
      onClick={(ev) => {
        onSelect();
        // The behavior that makes tabs feel native: selecting an
        // edge tab glides it to the center of the strip.
        api.scrollToItem(ev.currentTarget, 'smooth', 'center');
      }}
    >
      {label}
    </button>
  );
}
```

## 또는 shadcn 컴포넌트로 설치하기

[scroll-tabs](https://react-horizontal-scrolling-menu.dev/r/scroll-tabs.json) 레지스트리 아이템은 이 패턴을 데이터 기반으로 제공합니다 — `tabs`, `value`, `onValueChange`를 전달하면 됩니다 — `components/ui/`에 수정 가능한 컴포넌트로 설치됩니다:

shadcn

```
npx shadcn@latest add https://react-horizontal-scrolling-menu.dev/r/scroll-tabs.json
```

## 관련 예제

-   [클릭한 항목 가운데 정렬scrollToItem에 inline: center — 스크롤 가능한 탭 패턴.](https://react-horizontal-scrolling-menu.dev/ko/examples/center-on-click.md)
-   [스크롤 위치 저장과 복원언마운트와 페이지 새로고침을 넘어 스크롤 오프셋을 유지.](https://react-horizontal-scrolling-menu.dev/ko/examples/save-restore-position.md)
-   [마우스로 드래그해 스크롤항목 클릭은 여전히 동작하게 하는 마우스 드래그.](https://react-horizontal-scrolling-menu.dev/ko/examples/mouse-drag.md)

[예제 전체 21개](https://react-horizontal-scrolling-menu.dev/ko/examples.md)

---

More examples: <https://react-horizontal-scrolling-menu.dev/examples.md>
Library summary for LLMs: <https://react-horizontal-scrolling-menu.dev/llms.txt>