React 교재 · 운영 25편 · 시리즈 완결

React DevTools + 마이그레이션

디버깅 도구 + 옛 코드 정리 패턴 — 시리즈 마지막 25편.

마지막 편. 1~24편으로 React 코드를 처음부터 production 까지 짤 수 있다. 그러나 운영 시작하면 두 가지가 또 따라온다 — 디버깅 과 기존 코드 마이그레이션. 둘 다 도구·패턴이 있어 한 번 익히면 평생 쓴다.

이번 25편은 React DevTools 의 핵심 4 기능 + 3 마이그레이션 패턴 (Class→Hooks·JS→TS·CRA→Vite) + 시리즈 마무리.

1. React DevTools — 설치 + 핵심 4 기능

Chrome·Firefox·Edge 확장 — "React Developer Tools" 검색·설치. 설치하면 DevTools 에 Components 와 Profiler 탭 추가.

4 핵심 기능 — ① Components 트리: 어느 컴포넌트가 어떤 props·state 인지 실시간. ② "Highlight updates": 재렌더 되는 컴포넌트가 화면에서 깜빡임 (16편 성능 진단). ③ Profiler 녹화: 한 액션의 모든 렌더를 측정·시각화. ④ "useReducer" 다이얼로그: action·state 변화 추적 (14편).

실전 — Highlight updates 로 누수 잡기

DevTools 톱니바퀴 → "Highlight updates when components render" 체크. 페이지 사용하다 보면 — input 한 글자 입력에 전체 페이지가 깜빡인다? → 부모 어딘가에서 state 가 위까지 흘러간다. 16편 memo·useMemo 가 답.

Profiler 녹화

Profiler 탭 → 빨간 점 (녹화 시작) → 느린 액션 수행 → 다시 클릭 (정지). 컴포넌트별 렌더 횟수·시간 시각화. "이 컴포넌트가 30번 렌더됐는데 1번이면 충분" 패턴을 정확히 짚어준다. 측정 없이 최적화하지 말 것 (16편 원칙).

2. 마이그레이션 1 — Class → Hooks

2020 년 이전 코드베이스라면 클래스 컴포넌트 가득. 모든 패턴이 함수형으로 대응.

// Before (Class)
class Counter extends React.Component {
  state = { count: 0 };
  componentDidMount() {
    this.timer = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  tick = () => this.setState({ count: this.state.count + 1 });
  render() {
    return <p>{this.state.count}</p>;
  }
}

// After (Hooks)
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(timer);
  }, []);
  return <p>{count}</p>;
}

대응 — this.state → useState · componentDidMount → useEffect(...,[]) · componentWillUnmount → effect 의 cleanup return · this.props → 함수 인자. 6편·11편 패턴 그대로.

마이그레이션 순서 — ① 잎(leaf) 컴포넌트부터. ② 한 번에 1 컴포넌트, PR 분리. ③ 21편 테스트로 회귀 검증. 큰 컴포넌트는 일단 두고 새 코드부터 함수형으로 작성.

3. 마이그레이션 2 — JavaScript → TypeScript

# 1. 설정 추가
npm install -D typescript @types/react @types/react-dom

# tsconfig.json (allowJs 핵심 — 점진 마이그레이션)
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "strict": false,
    ...
  }
}

# 2. 파일 한 개씩 변환
mv Button.jsx Button.tsx

# 3. 타입 추가 (20편 패턴)
type ButtonProps = { label: string; onClick: () => void };
function Button({ label, onClick }: ButtonProps) { ... }

마이그레이션 순서 권장 — ① tsconfig 추가, 모든 .js 가 동작 보장. ② 새 파일부터 .tsx 로. ③ 자주 수정하는 파일·핵심 비즈니스 로직 우선. ④ any 임시 허용 (strict: false). ⑤ 1년 후 strict: true 로 점진 강화. 한 번에 전체 변환은 비현실적.

4. 마이그레이션 3 — CRA → Vite

CRA 가 deprecated (2편 참조) 이라 기존 프로젝트면 Vite 전환 권장. 단순한 SPA 면 1~2일.

# 1. 새 폴더에 Vite 프로젝트 생성
npm create vite@latest my-app-vite -- --template react-ts

# 2. 옛 src/ 통째로 복사
cp -r my-app-cra/src my-app-vite/

# 3. 환경변수 prefix 변경
# REACT_APP_API_URL → VITE_API_URL
sed -i 's/REACT_APP_/VITE_/g' src/**/*.{ts,tsx}

# 4. process.env → import.meta.env 치환
sed -i 's/process\.env\./import.meta.env./g' src/**/*.{ts,tsx}

# 5. public/index.html → 프로젝트 root 의 index.html 로 이동·통합

# 6. 의존성 재설치
npm install
npm run dev   # 동작 확인

대부분 케이스 위 6단계로 끝. react-scripts·react-app-rewired·CRA 전용 플러그인을 쓰던 경우는 추가 작업 필요.

5. 시리즈 완결 — 25편 회고

1편 "React 란 무엇인가" 부터 여기까지 25편. 입문 5편으로 컴포넌트·JSX·Props, 기초 5편으로 state·이벤트·렌더링·form·effect, 중급 5편으로 hook·context·reducer·router·성능, 고급 6편으로 Suspense·Error·CSS·TS·테스트·Zod, 운영 4편으로 RSC·배포·DevTools·마이그레이션.

이 25편이면 React 면접·실무 양쪽 다 자신 있게. 다음 시리즈는 Next.js·Node.js·FastAPI 중 박준성님 결정.

React 교재 시리즈 완결

1~25편 완료. 다음은 Next.js (React 위 풀스택) 또는 Node.js (백엔드) 시리즈로 이어집니다.