10장: React 18에서 19로 마이그레이션

pnpm add react@18.3 react-dom@18.3

# React 코드 마이그레이션
npx codemod@latest react/19/migration-recipe
 
# TypeScript 타입 마이그레이션
npx types-react-codemod@latest preset-19 ./src

pnpm add react@^19.0.0 react-dom@^19.0.0
pnpm add -D @types/react@^19.0.0 @types/react-dom@^19.0.0

// React 18 (제거됨)
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.hydrate(<App />, document.getElementById('root'));
 
// React 19
import { createRoot, hydrateRoot } from 'react-dom/client';
 
// 클라이언트 렌더링
const root = createRoot(document.getElementById('root')!);
root.render(<App />);
 
// 하이드레이션 (SSR)
hydrateRoot(document.getElementById('root')!, <App />);

// React 18 (제거됨)
ReactDOM.unmountComponentAtNode(container);
 
// React 19
const root = createRoot(container);
root.render(<App />);
// 나중에 언마운트
root.unmount();

// React 18 (제거됨)
class MyComponent extends React.Component {
  componentDidMount() {
    const node = ReactDOM.findDOMNode(this);
  }
}
 
// React 19: useRef 사용
function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const node = ref.current;
  }, []);
  return <div ref={ref}>...</div>;
}

// React 18 (제거됨)
import { act } from 'react-dom/test-utils';
 
// React 19
import { act } from 'react';

// React 18 (제거됨)
import PropTypes from 'prop-types';
 
MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  count: PropTypes.number,
};
 
// React 19: TypeScript 타입
interface MyComponentProps {
  name: string;
  count?: number;
}
 
function MyComponent({ name, count = 0 }: MyComponentProps) {
  return <div>{name}: {count}</div>;
}

// React 18 (함수 컴포넌트에서 제거됨)
function Button({ size, variant }) { /* ... */ }
Button.defaultProps = {
  size: 'medium',
  variant: 'primary',
};
 
// React 19: ES6 기본값
function Button({
  size = 'medium',
  variant = 'primary',
}: ButtonProps) {
  // ...
}

// React 18 (제거됨)
class MyComponent extends React.Component {
  render() {
    return <input ref="myInput" />;
  }
  handleClick() {
    this.refs.myInput.focus();
  }
}
 
// React 19: useRef 또는 콜백 ref
function MyComponent() {
  const inputRef = useRef<HTMLInputElement>(null);
  function handleClick() {
    inputRef.current?.focus();
  }
  return <input ref={inputRef} />;
}

// React 18 (제거됨)
class Provider extends React.Component {
  getChildContext() {
    return { theme: 'dark' };
  }
  static childContextTypes = {
    theme: PropTypes.string,
  };
}
 
class Consumer extends React.Component {
  static contextTypes = {
    theme: PropTypes.string,
  };
  render() {
    return <div>{this.context.theme}</div>;
  }
}
 
// React 19: createContext + useContext
const ThemeContext = createContext('light');
 
function Provider({ children }: { children: React.ReactNode }) {
  return (
    <ThemeContext value="dark">
      {children}
    </ThemeContext>
  );
}
 
function Consumer() {
  const theme = use(ThemeContext);
  return <div>{theme}</div>;
}

// React 18: 인자 없이 호출 가능
const ref = useRef<HTMLDivElement>();  // ref.current: HTMLDivElement | undefined
 
// React 19: 인자 필수
const ref = useRef<HTMLDivElement>(null);  // ref.current: HTMLDivElement | null
 
// undefined를 명시적으로 전달하면 MutableRefObject
const ref = useRef<number>(undefined);  // ref.current: number | undefined

// React 18: useRef<HTMLDivElement>(null)의 ref.current는 readonly
const ref = useRef<HTMLDivElement>(null);
ref.current = someElement;  // TypeScript 에러
 
// React 19: 모든 ref.current가 writable
const ref = useRef<HTMLDivElement>(null);
ref.current = someElement;  // 허용

// React 18
type Props = React.ReactElement['props'];  // any
 
// React 19
type Props = React.ReactElement['props'];  // unknown
 
// 명시적 타입 지정이 필요
type Props = React.ReactElement<{ title: string }>['props'];

// React 18: 암묵적 반환 허용
<div ref={(node) => (myRef = node)} />
 
// React 19: 블록 바디 필요 (클린업 함수와의 혼동 방지)
<div ref={(node) => { myRef = node; }} />

// React 18: 전역 JSX 네임스페이스
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'my-element': React.HTMLAttributes<HTMLElement>;
    }
  }
}
 
// React 19: React 모듈 범위
declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'my-element': React.HTMLAttributes<HTMLElement>;
    }
  }
}

// React 18: 에러를 다시 throw
// console.error + window.onerror에 동일 에러가 중복 보고됨
 
// React 19: 에러를 다시 throw하지 않음
// Error Boundary에서 잡힌 에러 → console.error
// 잡히지 않은 에러 → window.reportError
 
// 커스텀 에러 핸들링
const root = createRoot(container, {
  onCaughtError(error, errorInfo) {
    // Error Boundary에서 잡힌 에러 로깅
  },
  onUncaughtError(error, errorInfo) {
    // 잡히지 않은 에러 로깅
  },
});

// React 18: 이중 렌더링 시 매번 새로 계산
// React 19: 이중 렌더링 시 첫 번째 결과를 재사용 (메모이제이션)
 
// 이로 인해 useMemo, useCallback의 두 번째 호출에서
// 첫 번째 호출의 결과가 재사용됩니다.

// React 18: fallback 표시에 약간의 지연이 있음
// React 19: fallback이 즉시 표시됨
 
// 이 변경으로 인해 기존에 "눈에 보이지 않던" 짧은 로딩이
// 이제 눈에 보일 수 있습니다. skeleton UI를 더 신경 써야 합니다.

// React 19: src, href에 javascript: URL 사용 시 에러
<a href="javascript:void(0)">클릭</a>  // 에러
<script src="javascript:alert(1)" />    // 에러
 
// 대체 방법
<button onClick={handleClick}>클릭</button>

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "^15.0.0",
    "@tanstack/react-query": "^5.0.0",
    "react-hook-form": "^7.50.0",
    "zustand": "^5.0.0",
    "framer-motion": "^11.0.0"
  }
}

<!-- React 18: UMD -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
 
<!-- React 19: ESM -->
<script type="module">
  import React from 'https://esm.sh/react@19';
  import ReactDOM from 'https://esm.sh/react-dom@19/client';
</script>