레슨 9 / 9·15분

React 레퍼런스

Hooks 요약

tsx

// ─── 상태 관리 ───
const [state, setState] = useState(initialValue);
const [state, dispatch] = useReducer(reducer, initialState);

// ─── 사이드 이펙트 ───
useEffect(() => {
  // 실행할 로직
  return () => { /* 클린업 */ };
}, [dependencies]);

// ─── 참조 ───
const ref = useRef(initialValue);    // DOM 접근 or 값 유지
ref.current;                         // 현재 값

// ─── 성능 최적화 ───
const memoized = useMemo(() => compute(a, b), [a, b]);
const fn = useCallback((x) => doSomething(x, y), [y]);

// ─── Context ───
const ctx = createContext(defaultValue);
const value = useContext(ctx);

// ─── 기타 ───
const id = useId();                  // 고유 ID 생성
useLayoutEffect(() => {}, []);       // DOM 페인트 전 실행

JSX 규칙

•반환할 JSX는 하나의 루트 요소로 감싸야 함 —
또는 <>(Fragment)
•class → className, for → htmlFor
•모든 태그는 닫혀야 함 — , ,
•JavaScript 표현식은 {중괄호}로 감싸기
•인라인 스타일은 객체로: style={{ color: "red" }}
•이벤트는 camelCase: onClick, onChange, onSubmit
•조건부 렌더링: {조건 && <요소>} 또는 {조건 ? A : B}
•리스트 렌더링: array.map(item => )

컴포넌트 패턴

tsx

// ─── 기본 컴포넌트 ───
function Component({ prop1, prop2 }: Props) {
  return <div>{prop1}</div>;
}

// ─── 제어 컴포넌트 (Controlled) ───
function Input({ value, onChange }: {
  value: string;
  onChange: (v: string) => void;
}) {
  return <input value={value}
    onChange={e => onChange(e.target.value)} />;
}

// ─── 조건부 렌더링 패턴 ───
// 로딩 상태
if (loading) return <Spinner />;
if (error) return <ErrorMessage error={error} />;
return <Content data={data} />;

// ─── 리스트 + 빈 상태 ───
{items.length === 0 ? (
  <EmptyState message="항목이 없습니다" />
) : (
  items.map(item => <Item key={item.id} {...item} />)
)}

자주 사용하는 이벤트 타입

•React.MouseEvent — onClick, onDoubleClick
•React.ChangeEvent — onChange (input)
•React.ChangeEvent — onChange (select)
•React.FormEvent — onSubmit
•React.KeyboardEvent — onKeyDown, onKeyUp
•React.FocusEvent — onFocus, onBlur
•React.DragEvent — onDrag, onDrop

Next.js App Router 핵심

tsx

// app/page.tsx         →  / (홈)
// app/about/page.tsx   →  /about
// app/blog/[id]/page.tsx → /blog/:id (동적)

// 서버 컴포넌트 (기본) — async 가능, 직접 DB 접근 가능
export default async function Page() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

// 클라이언트 컴포넌트 — 상호작용, Hook 사용
'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// 레이아웃 — 하위 페이지에 공통 적용
// app/layout.tsx
export default function Layout({ children }) {
  return (
    <html>
      <body>
        <nav>네비게이션</nav>
        {children}
      </body>
    </html>
  );
}

💡

React 공식 문서(react.dev)는 최신 React 패턴과 모범 사례를 상세히 설명합니다. 특히 "Learn" 섹션은 단계별로 잘 구성되어 있어 추가 학습에 추천합니다.

←실전: 메모 앱 만들기 과정 완료!→