React로 탭 컴포넌트 구현

핵심 개념

useState로 활성 탭을 관리하고 조건부 렌더링으로 내용을 전환합니다. 탭 버튼에 onClick으로 상태를 변경합니다. 데이터를 배열로 관리하면 탭 추가/제거가 쉽습니다. 탭 시스템을 지우며 콘텐츠 전환이 어떻게 사라지는지 확인하십시오.

코드 분석

REACT📋 코드 (32줄)







const { useState } = React;
  const TABS = [
    { id: 'status', label: 'STATUS', content: 'UNIT T-800 · ONLINE · ENERGY 100%' },
    { id: 'mission', label: 'MISSION', content: 'TARGET: JOHN CONNOR · PRIORITY: CRITICAL' },
    { id: 'weapons', label: 'WEAPONS', content: 'PLASMA RIFLE · SHOTGUN · MINIGUN' },
  ];

  function Tabs() {
    const [active, setActive] = useState('status');
    const current = TABS.find(t => t.id === active);
    return (
      <div>
        <div style={{display:'flex', borderBottom:'1px solid #1a1a1a', marginBottom:'12px'}}>
          {TABS.map(tab => (
            <button key={tab.id} onClick={() => setActive(tab.id)}
              style={{background:'none', border:'none', borderBottom: active===tab.id ? '2px solid #10b981' : '2px solid transparent', color: active===tab.id ? '#10b981' : '#555', padding:'6px 12px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px', letterSpacing:'0.1em'}}>
              {tab.label}
            </button>
          ))}
        </div>
        <div style={{color:'#888', fontSize:'12px'}}>{current.content}</div>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<Tabs />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React '탭 컴포넌트' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'탭 컴포넌트'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React '탭 컴포넌트' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React '탭 컴포넌트' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

React로 탭 컴포넌트 구현은 이 3가지만 확실히 잡으세요

1.탭 전환마다 페이지를 새로 로딩하면 이미 불러온 데이터를 반복 요청하게 되고, 전환이 느립니다

2.activeTab 상태로 현재 탭을 추적하고, 탭별 콘텐츠를 조건부 렌더링으로 전환하면 즉각적인 탭 전환이 가능합니다

3.다음 챕터에서 서버에서 데이터를 가져와 화면에 표시하는 데이터 페칭 패턴을 구현합니다

💬 이 챕터 질문 보기

REACT · CH.27 — 질문하거나 답변을 확인하세요

→

진행도 27 / 34

← 커리큘럼으로 ← 목록으로 (React)