React로 만드는 대표기업 서비스

React의 Virtual DOM이 무엇인지
실제 DOM과 비교한 다이어그램 + 코드 예시로 알려줘.

IntersectionObserver + useState로
뉴스피드 무한 스크롤 컴포넌트를 만들어줘.
중복 호출 방지 + 로딩 인디케이터 포함.

10만 개 포스트도 부드러운 가상 스크롤(react-virtuoso 없이)을
직접 구현하는 컴포넌트를 설계해줘.
visible window + recycle + measure 포함.

useState로 검색어 입력 + 결과 필터를 만들어줘.
간단한 배열에서 includes로 필터링.

React Router의 useSearchParams로 URL 쿼리스트링과
필터 상태를 동기화해줘.
새로고침해도 필터 유지 + 뒤로가기 동작.

Airbnb 같은 검색 페이지를 설계해줘.
Compound Component 패턴(Search.Filter, Search.Map, Search.Results) +
URL을 SSOT로 + 지연 로딩 + 페이지네이션 + 접근성.

React.lazy + Suspense로 코드 분할하는 예시를 만들어줘.
어떤 라우트를 분할할지 추천도.

Netflix 같은 가로 스크롤 캐러셀을 만들어줘.
scroll-snap-type + prev/next 버튼 +
키보드 ←→ 네비게이션 + 이미지 lazy.

Netflix 수준의 미디어 페이지 성능을 설계해줘.
포함: route prefetch / image priority / Suspense streaming /
useDeferredValue로 입력 우선순위 / Web Vitals 모니터링.

useState로 메시지 리스트와 입력창을 만들어줘.
Enter 키로 메시지 추가 + 스크롤 자동 하단.

useReducer로 메시지 상태(추가/수정/삭제/낙관적 업데이트)를
관리하는 채팅 UI를 만들어줘.
WebSocket 연결 모킹 포함.

Discord 수준의 채팅 UI를 설계해줘.
포함: 채널 전환 시 상태 격리 / 가상 리스트 /
타이핑 인디케이터 / 끊김 시 큐잉 + 재전송 / 접근성.

useRef로 canvas 요소에 접근하고
사각형을 그리는 React 컴포넌트를 만들어줘.

React 컴포넌트로 자유롭게 그리기 도구를 만들어줘.
useRef + requestAnimationFrame +
포인터 이벤트 + 색상/굵기 툴바.

Figma 같은 캔버스 + 패널 하이브리드 아키텍처를 설계해줘.
React는 패널·UI / Canvas는 직접 렌더 /
명령형 핸들(useImperativeHandle) / 성능 / 협업.

// 대표기업 React 기법 5가지 — 미니 데모
import { useState, useEffect, useRef, useReducer, lazy, Suspense } from 'react';

// 1. Meta: 무한 스크롤
function Feed({ fetchPage }) {
  const [posts, setPosts] = useState([]); const [page, setPage] = useState(1);
  const sentinel = useRef(null);
  useEffect(() => {
    const io = new IntersectionObserver((es) => es[0].isIntersecting && setPage(p => p + 1), { rootMargin: '200px' });
    sentinel.current && io.observe(sentinel.current);
    return () => io.disconnect();
  }, []);
  useEffect(() => { fetchPage(page).then(p => setPosts(prev => [...prev, ...p])); }, [page, fetchPage]);
  return (<>{posts.map(p => <article key={p.id}>{p.title}</article>)}<div ref={sentinel} /></>);
}

// 2. Airbnb: URL 상태 동기화 (가상 useSearchParams)
function useUrlState(key) {
  const [v, setV] = useState(() => new URLSearchParams(location.search).get(key) || '');
  useEffect(() => {
    const sp = new URLSearchParams(location.search); sp.set(key, v);
    history.replaceState(null, '', '?' + sp.toString());
  }, [v, key]);
  return [v, setV];
}

// 3. Netflix: 코드 분할
const Profile = lazy(() => import('./Profile'));
function App() { return <Suspense fallback='로딩...'><Profile /></Suspense>; }

// 4. Discord: useReducer + 낙관적 UI
function chatReducer(state, action) {
  if (action.type === 'add') return [...state, action.msg];
  if (action.type === 'confirm') return state.map(m => m.tempId === action.tempId ? action.msg : m);
  return state;
}
function Chat() {
  const [messages, dispatch] = useReducer(chatReducer, []);
  function send(text) {
    const tempId = Date.now();
    dispatch({ type: 'add', msg: { tempId, text, pending: true } }); // 낙관적
    fetch('/api/messages', { method: 'POST', body: JSON.stringify({ text }) })
      .then(r => r.json()).then(msg => dispatch({ type: 'confirm', tempId, msg }));
  }
  return <button onClick={() => send('hi')}>Send</button>;
}

// 5. Figma: useRef + Canvas
function Sketch() {
  const ref = useRef(null);
  useEffect(() => {
    const ctx = ref.current?.getContext('2d');
    ctx && ctx.fillRect(20, 20, 100, 100);
  }, []);
  return <canvas ref={ref} width={400} height={300} />;
}