React 치트시트
검색하고 인쇄할 수 있는 React 19 참조 자료——컴포넌트, JSX, 훅, 새로운 Actions API, 컨텍스트, ref, 성능. 무료.
컴포넌트 및 JSX
12function App() { return <h1>Hi</h1>; }
JSX를 반환하는 함수 컴포넌트
export default function App() {}
컴포넌트를 기본 내보내기
<Greeting name="Ada" />
props와 함께 컴포넌트 렌더링
{1 + 2} or {user.name}
중괄호로 JS 표현식 삽입
<>{a}{b}</>
Fragment는 추가 DOM 없이 노드 그룹화
<div className="card">
CSS에는 class 대신 className 사용
{isOpen && <Menu />}
&&로 조건부 렌더링
{ok ? <Yes /> : <No />}
삼항으로 노드 간 선택
{items.map(i => <li key={i.id}>{i.t}</li>)}
배열로부터 리스트 렌더링
function Btn({ label, onClick }) {}
시그니처에서 props 구조 분해
function Card({ children }) { return children; }
children prop으로 중첩 JSX 읽기
<input value={v} onChange={onChange} />
상태에 바인딩된 제어 입력
렌더링 및 설정
10import { createRoot } from 'react-dom/client'
클라이언트 루트 API 임포트
createRoot(document.getElementById('root')).render(<App/>)
앱을 DOM에 마운트
import { StrictMode } from 'react'
StrictMode 래퍼 임포트
<StrictMode><App /></StrictMode>
개발 중 버그 노출
import { hydrateRoot } from 'react-dom/client'
하이드레이션 API 임포트
hydrateRoot(el, <App />)
서버 HTML에 React 연결
root.unmount()
마운트된 루트 해제
import App from './App.jsx'
모듈에서 컴포넌트 임포트
<App {...props} />
객체를 props로 전개
export { Button, Card }
여러 컴포넌트를 명명 내보내기
상태 및 이펙트
12const [count, setCount] = useState(0)
상태 변수 선언
setCount(c => c + 1)
이전 값으로부터 업데이트
setUser(u => ({ ...u, name }))
객체 상태를 불변하게 업데이트
useEffect(() => { run(); }, [dep])
의존성 변경 시 이펙트 실행
useEffect(() => { /* once */ }, [])
마운트 시에만 이펙트 실행
useEffect(() => () => cleanup(), [])
정리 함수 반환
const ref = useRef(null)
렌더링 간 가변 값 유지
const [state, dispatch] = useReducer(r, init)
리듀서로 복잡한 상태 관리
const theme = useContext(ThemeContext)
가장 가까운 컨텍스트 값 읽기
const memo = useMemo(() => calc(a), [a])
비싼 계산 메모이제이션
useLayoutEffect(() => {}, [])
레이아웃 후 동기 실행
useSyncExternalStore(sub, get)
외부 스토어 구독
React 19 훅 및 API
12import { use } from 'react'
새 use API 임포트
const data = use(promise)
프로미스 읽기, 준비될 때까지 중단
const theme = use(ThemeContext)
컨텍스트 읽기, 조건부 허용
const [state, action, pending] = useActionState(fn, init)
상태, 액션, 대기 추적
const [opt, addOpt] = useOptimistic(state, reducer)
낙관적 값을 즉시 표시
const { pending } = useFormStatus()
부모 폼 제출 상태 읽기
const [isPending, startTransition] = useTransition()
업데이트를 비긴급으로 표시
startTransition(async () => await save())
트랜지션에서 비동기 Action 실행
const deferred = useDeferredValue(value)
UI 반응성을 위해 값 지연
const id = useId()
안정적 고유 id 생성
<title>Page title</title>
트리 어디서든 메타데이터 렌더링
function Input({ ref }) {}
ref는 일반 prop, forwardRef 불필요
폼 및 Actions
12<form action={handleSubmit}>
함수를 폼 Action으로 전달
function handleSubmit(formData) {}
Action이 FormData 수신
formData.get('email')
FormData에서 필드 읽기
const [state, action] = useActionState(submit, null)
Action을 컴포넌트 상태에 연결
<form action={action}>
폼에서 래핑된 Action 사용
const [s, a, pending] = useActionState(fn, init)
UI용 대기 플래그 노출
return { error: 'Invalid' }
Action에서 오류 상태 반환
function Submit() { const { pending } = useFormStatus() }
제출 버튼 내부에서 대기 상태 읽기
<button disabled={pending}>Save</button>
대기 중 제출 비활성화
import { requestFormReset } from 'react-dom'
폼 리셋 헬퍼 임포트
requestFormReset(formEl)
비제어 폼 리셋
<form action={action}><Submit /></form>
상태와 함께 Action 폼 구성
Props 및 합성
10function Hi({ name = 'Guest' }) {}
구조 분해를 통한 기본 prop
function Box({ children }) { return children; }
children prop으로 콘텐츠 래핑
<Box><p>Inside</p></Box>
JSX를 children으로 전달
function List({ render }) { return render(); }
render prop 패턴
<List render={() => <Item />} />
render 함수 제공
<Input {...props} />
전개로 모든 props 전달
const { id, ...rest } = props
prop 하나 선택하고 나머지 전달
<Avatar {...rest} size="lg" />
전개 후 prop 재정의
function Btn(props: BtnProps) {}
TypeScript 인터페이스로 props 타입 지정
<Slot label={<b>Hi</b>} />
명명 prop으로 JSX 전달
이벤트
10<button onClick={handleClick}>
클릭 핸들러 연결
function handleClick(e) {}
합성 이벤트 수신
<input onChange={e => set(e.target.value)} />
변경 시 입력 값 읽기
<form onSubmit={e => e.preventDefault()}>
기본 폼 제출 중지
e.stopPropagation()
이벤트 버블링 방지
<li onClick={() => remove(id)}>
클로저로 인수 전달
<input onKeyDown={e => e.key === 'Enter'}
특정 키 입력 처리
<div onMouseEnter={hover}>
포인터 이벤트 수신
e.currentTarget.value
핸들러가 붙은 요소 읽기
<button onClick={() => {}} type="button">
암묵적 폼 제출 방지
리스트 및 키
10arr.map(x => <li key={x.id}>{x.t}</li>)
항목마다 노드 하나 렌더링
key={item.id}
각 항목에 안정적 키 부여
key={index}
정적 리스트에만 인덱스 키 사용
users.map(u => <Card key={u.id} {...u} />)
항목 필드를 props로 전개
{list.length === 0 && <Empty />}
빈 리스트용 대체 표시
import { Fragment } from 'react'
키 그룹용 Fragment 임포트
<Fragment key={id}>{a}{b}</Fragment>
리스트의 키 있는 fragment
{rows.filter(r => r.on).map(...)}
매핑 전 필터
Keys must be unique among siblings
키가 React의 리스트 diff를 돕는 이유
{[...Array(n)].map((_, i) => ...)}
고정 길이 범위 매핑
Context
10const ThemeContext = createContext('light')
기본값으로 context 생성
import { createContext } from 'react'
context 팩토리 임포트
<ThemeContext value={theme}>
값 제공 (React 19 구문)
<ThemeContext value={theme}><App /></ThemeContext>
그것을 읽는 트리 래핑
const theme = useContext(ThemeContext)
useContext로 context 읽기
const theme = use(ThemeContext)
use API로 context 읽기
if (cond) { const t = use(Ctx); }
use는 조건부로 context 읽기 가능
export const ThemeContext = createContext()
공유 context 내보내기
<Ctx value={{ user, setUser }}>
객체를 값으로 전달
Avoid new objects each render
재렌더링 제한을 위해 값 메모이제이션
Refs
10const inputRef = useRef(null)
ref 홀더 생성
<input ref={inputRef} />
노드에 ref 연결
inputRef.current.focus()
current로 DOM 노드 접근
function Field({ ref }) { return <input ref={ref} /> }
ref를 prop으로, forwardRef 불필요
<Field ref={inputRef} />
컴포넌트에 ref 전달
useImperativeHandle(ref, () => ({ focus }))
명령형 API 노출
const setRef = node => { box = node; }
콜백 ref 사용
<div ref={setRef} />
콜백 ref 연결
const count = useRef(0)
재렌더링 없이 값 저장
ref={node => { return () => cleanup(); }}
정리가 있는 콜백 ref (React 19)
성능
10const Memo = memo(Component)
props가 같으면 재렌더링 건너뛰기
import { memo } from 'react'
memo 헬퍼 임포트
const value = useMemo(() => calc(a), [a])
계산된 값 캐시
const fn = useCallback(() => f(a), [a])
함수 동일성 캐시
const Lazy = lazy(() => import('./Big.jsx'))
컴포넌트 코드 분할
import { lazy, Suspense } from 'react'
lazy 및 Suspense 임포트
<Suspense fallback={<Spin />}><Lazy /></Suspense>
로딩 중 대체 표시
startTransition(() => setQuery(q))
비긴급 상태 업데이트 표시
const slow = useDeferredValue(query)
비싼 파생 UI 지연
React Compiler auto-memoizes
수동 메모이제이션을 종종 제거
기타 및 메타데이터
10<Suspense fallback={<Loading />}>
비동기 콘텐츠용 경계
class ErrorBoundary extends Component {}
렌더 오류 포착 (레거시 클래스)
<title>My Page</title>
컴포넌트에서 문서 제목 호이스트
<meta name="description" content="..." />
head에 메타 태그 렌더링
<link rel="stylesheet" href="..." />
스타일시트 링크 호이스트
<Comp key={id} />
키 변경으로 컴포넌트 재마운트
React.lazy(() => import('./Page.jsx'))
라우트 컴포넌트 지연 임포트
createPortal(node, container)
다른 DOM 노드로 렌더링
{/* a comment */}
JSX 안에 주석 작성
cleanup return in useEffect
항상 구독/타이머 해제
“:q”와 일치하는 항목이 없습니다.
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.