React로 캐러셀 슬라이더 구현

핵심 개념

useState로 현재 슬라이드 인덱스를 관리합니다. CSS transform으로 슬라이드 전환 애니메이션을 구현합니다. 자동 재생은 useEffect + setInterval로 구현합니다. 캐러셀 시스템을 지우며 슬라이드가 어떻게 멈추는지 확인하십시오.

코드 분석

REACT📋 코드 (34줄)







const { useState, useEffect } = React;
  const SLIDES = [
    { model: 'T-800', color: '#10b981', desc: 'CYBERDYNE MODEL 101' },
    { model: 'T-1000', color: '#f59e0b', desc: 'LIQUID METAL PROTOTYPE' },
    { model: 'T-X', color: '#22c55e', desc: 'HYBRID TERMINATRIX' },
  ];

  function Carousel() {
    const [idx, setIdx] = useState(0);
    useEffect(() => {
      const timer = setInterval(() => setIdx(i => (i+1) % SLIDES.length), 2000);
      return () => clearInterval(timer);
    }, []);
    const s = SLIDES[idx];
    return (
      <div>
        <div style={{border:`1px solid ${s.color}44`, padding:'20px', marginBottom:'12px', transition:'all 0.3s', textAlign:'center'}}>
          <div style={{color:s.color, fontSize:'20px', marginBottom:'4px'}}>{s.model}</div>
          <div style={{color:'#888', fontSize:'12px'}}>{s.desc}</div>
        </div>
        <div style={{display:'flex', justifyContent:'center', gap:'6px'}}>
          {SLIDES.map((_,i) => <div key={i} onClick={() => setIdx(i)} style={{width:'8px', height:'8px', borderRadius:'50%', background: i===idx ? '#10b981' : '#333', cursor:'pointer', transition:'all 0.2s'}} />)}
        </div>
      </div>
    );
  }

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

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.현재 인덱스 상태로 보이는 슬라이드를 결정하고, transform: translateX로 슬라이드를 이동시키는 것이 기본 구조입니다

3.다음 챕터에서 콘텐츠를 접었다 펼치는 아코디언 UI를 구현합니다

💬 이 챕터 질문 보기

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

→

진행도 32 / 34

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