React 배워서 어디에 쓸까?

React 컴포넌트 + props + useState를
버튼 카운터 예시 한 파일로 보여줘.
각 줄 주석 + JSX 문법 포인트 표시.

useEffect로 GitHub API에서 사용자 정보를 받고
로딩/에러/성공 상태를 표시하는 컴포넌트를 만들어줘.
로딩 스켈레톤 UI 포함.

Next.js 14 App Router + TanStack Query + Zustand로
SaaS 대시보드 아키텍처를 설계해줘.
서버/클라이언트 컴포넌트 경계 + 캐싱 전략 + 인증 포함.

// React 레벨별 데모 — 핵심 개념 한 파일
import { useState, useEffect } from 'react';

// 🟢 레벨 1: 컴포넌트 + props + useState
function Counter({ initial = 0, step = 1 }) {
  const [count, setCount] = useState(initial);
  return (
    <button onClick={() => setCount(c => c + step)}>
      Clicked {count} times
    </button>
  );
}

// 🟡 레벨 2: useEffect + 커스텀 훅
function useFetch(url) {
  const [state, setState] = useState({ data: null, loading: true, error: null });
  useEffect(() => {
    const ctrl = new AbortController();
    fetch(url, { signal: ctrl.signal })
      .then(r => r.ok ? r.json() : Promise.reject(r.status))
      .then(data => setState({ data, loading: false, error: null }))
      .catch(error => error.name !== 'AbortError' && setState(s => ({ ...s, loading: false, error })));
    return () => ctrl.abort();
  }, [url]);
  return state;
}

// 🔵 레벨 3: 최적화 + Context
import { createContext, useContext, useMemo, memo } from 'react';
const ThemeCtx = createContext('light');
const ExpensiveList = memo(function ExpensiveList({ items }) {
  const sorted = useMemo(() => [...items].sort(), [items]);
  return <ul>{sorted.map(i => <li key={i}>{i}</li>)}</ul>;
});

// 🟣 레벨 4: Server Component (Next.js 14)
export async function ServerProductList() {
  const products = await fetch('https://api.shop/products').then(r => r.json());
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

/* 한 파일에 React 4단계가 모두 들어있습니다.
   레벨 1: useState + JSX
   레벨 2: useEffect + 커스텀 훅
   레벨 3: memo + useMemo + Context
   레벨 4: async Server Component */