효율적인 React 3편 — 구조로 렌더 범위 줄이기: memo보다 먼저 할 일

1. state 내리기          — 가장 싸다. 컴포넌트 하나 분리.
2. Composition           — children/slot으로 element 생성 위치를 옮긴다.
3. Context 분할          — 자주 바뀌는 값과 드물게 바뀌는 값을 나눈다.
4. 외부 스토어 + selector — 필요한 조각만 구독한다.
   └─ 그래도 부족하면 → React Compiler / memo

function Dashboard() {
  const [query, setQuery] = useState('');
 
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <SearchResults query={query} />
      <RevenueChart />       {/* query와 무관 */}
      <ActivityFeed />       {/* query와 무관 */}
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <Search />
      <RevenueChart />
      <ActivityFeed />
    </div>
  );
}
 
function Search() {
  const [query, setQuery] = useState('');
  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <SearchResults query={query} />
    </>
  );
}

function ResizablePanel() {
  const [width, setWidth] = useState(320);   // 드래그 중 초당 수십 번 변경
 
  return (
    <aside style={{ width }}>
      <DragHandle onDrag={setWidth} />
      <FileTree />          {/* 무겁고 width와 무관 */}
    </aside>
  );
}

function ResizablePanel({ children }: { children: React.ReactNode }) {
  const [width, setWidth] = useState(320);
  return (
    <aside style={{ width }}>
      <DragHandle onDrag={setWidth} />
      {children}
    </aside>
  );
}
 
function Sidebar() {
  return (
    <ResizablePanel>
      <FileTree />
    </ResizablePanel>
  );
}

function SplitLayout({ left, right }: { left: React.ReactNode; right: React.ReactNode }) {
  const [ratio, setRatio] = useState(0.5);
  return (
    <div className="split">
      <div style={{ flex: ratio }}>{left}</div>
      <Divider onChange={setRatio} />
      <div style={{ flex: 1 - ratio }}>{right}</div>
    </div>
  );
}
 
<SplitLayout left={<Editor />} right={<Preview />} />

// ❌ Layout과 Header는 user를 쓰지 않고 전달만 한다
<Page user={user} />
  → <Layout user={user} />
    → <Header user={user} />
      → <UserMenu user={user} />

// ✅ 데이터를 쓰는 element를 데이터가 있는 곳에서 만든다
function Page({ user }: { user: User }) {
  return (
    <Layout header={<Header right={<UserMenu user={user} />} />}>
      {/* ... */}
    </Layout>
  );
}

// ❌ Provider의 state 변경이 App 전체를 렌더
function App() {
  const [theme, setTheme] = useState<Theme>('light');
  return (
    <ThemeContext value={{ theme, setTheme }}>
      <Header />
      <Main />
      <Footer />
    </ThemeContext>
  );
}

// ✅ Provider 컴포넌트가 children을 받는다 → 기법 2와 같은 원리
function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');
  const value = useMemo(() => ({ theme, setTheme }), [theme]);
  return <ThemeContext value={value}>{children}</ThemeContext>;
}
 
function App() {
  return (
    <ThemeProvider>
      <Header />
      <Main />
      <Footer />
    </ThemeProvider>
  );
}

const CartItemsContext = createContext<CartItem[]>([]);
const CartActionsContext = createContext<CartActions | null>(null);
 
function CartProvider({ children }: { children: React.ReactNode }) {
  const [items, dispatch] = useReducer(cartReducer, []);
 
  // dispatch는 참조가 영구히 안정 → actions 객체도 한 번만 생성
  const actions = useMemo<CartActions>(() => ({
    add: (item) => dispatch({ type: 'ADD', item }),
    remove: (id) => dispatch({ type: 'REMOVE', id }),
  }), []);
 
  return (
    <CartActionsContext value={actions}>
      <CartItemsContext value={items}>
        {children}
      </CartItemsContext>
    </CartActionsContext>
  );
}
 
// 상품 카드 수백 개: 담기 버튼은 actions만 구독 → 장바구니가 바뀌어도 렌더 안 됨
function AddToCartButton({ product }: { product: Product }) {
  const { add } = useContext(CartActionsContext)!;
  return <button onClick={() => add(toCartItem(product))}>담기</button>;
}
 
// 헤더 배지: items를 구독 → 바뀔 때만 렌더
function CartBadge() {
  const items = useContext(CartItemsContext);
  return <span>{items.length}</span>;
}

type Listener = () => void;
 
export function createStore<T extends object>(initial: T) {
  let state = initial;
  const listeners = new Set<Listener>();
 
  return {
    getState: () => state,
    setState: (updater: (prev: T) => Partial<T>) => {
      state = { ...state, ...updater(state) };
      listeners.forEach(l => l());
    },
    subscribe: (listener: Listener) => {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
  };
}
 
export function useStore<T extends object, S>(
  store: ReturnType<typeof createStore<T>>,
  selector: (state: T) => S,
): S {
  return useSyncExternalStore(
    store.subscribe,
    () => selector(store.getState()),
    () => selector(store.getState()),   // 서버 렌더용 스냅샷
  );
}

const editorStore = createStore({ cursor: { line: 1, col: 1 }, fileName: 'index.ts', dirty: false });
 
function StatusBarCursor() {
  const line = useStore(editorStore, s => s.cursor.line);   // 원시값
  const col = useStore(editorStore, s => s.cursor.col);
  return <span>{line}:{col}</span>;
}
 
function TabTitle() {
  const fileName = useStore(editorStore, s => s.fileName);  // cursor가 바뀌어도 렌더 안 됨
  const dirty = useStore(editorStore, s => s.dirty);
  return <span>{fileName}{dirty && ' •'}</span>;
}

// ❌ 매 호출마다 새 객체 → 스냅샷이 항상 "다름"
const { line, col } = useStore(editorStore, s => ({ line: s.cursor.line, col: s.cursor.col }));

// ❌
function ProductPage({ product }: { product: Product }) {
  const [tab, setTab] = useState('detail');
 
  function ReviewForm() {                  // 렌더마다 새 함수 = 새 타입
    const [text, setText] = useState('');
    return <textarea value={text} onChange={e => setText(e.target.value)} />;
  }
 
  return (<><Tabs value={tab} onChange={setTab} /><ReviewForm /></>);
}

{items.map((item, index) => <Row key={index} item={item} />)}   // ❌ 순서가 바뀌는 목록
{items.map(item => <Row key={item.id} item={item} />)}         // ✅

{isEditing ? <Input defaultValue={a} /> : <Input defaultValue={b} />}

{isEditing ? <Input key="edit" defaultValue={a} /> : <Input key="view" defaultValue={b} />}

function ProductList({ products, onSelect }: Props) {
  const [query, setQuery] = useState('');
  const filtered = products.filter(p => p.name.includes(query));
  return (
    <>
      <SearchBox value={query} onChange={setQuery} />
      <Grid items={filtered} onSelect={onSelect} />
    </>
  );
}