📘 [Recat] React앱 디버깅 하기

2025년 04월 08일 in Dev / Frontend on #React #Web

[Recat] React앱 디버깅 하기

디버깅 보조 도구: React StrictMode

모든 컴포넌트의 함수를 두 번 실행 (개발환경 한정)
문제 발생 가능성 높은 패턴을 미리 감지 가능

// index.jsx
import { StrictMode } from "react";
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

전체 앱 또는 특정 컴포넌트만 감쌀 수도 있음

감지할 수 있는 문제

리렌더링 시 같은 배열을 재사용 → key 중복, 메모리 공유
이중 실행 시 증식되는 테이블 → 배열이 계속 누적되고 초기화되지 않음

React Developer Tools

크롬 확장 프로그램 설치
Components 탭: 컴포넌트 트리, props, state 확인 가능
Profiler: 성능 최적화 분석 가능 (추후 학습)
설치 완료 후 개발자 도구(F12)에 새로운 두 개의 탭 생성
⚛️ Components
Profiler

Components 탭 주요 기능

컴포넌트 트리 구조 시각화

루트 컴포넌트(App)와 그 하위 컴포넌트(UserInput, Results 등)를 트리 형태로 확인 가능
마우스를 올리면 해당 컴포넌트가 UI의 어떤 부분인지 시각적으로 강조

컴포넌트 상태 및 props 확인

선택한 컴포넌트의 props(속성) 와 state(상태) 값을 확인 가능
예시:
- UserInput 컴포넌트:
  - onChange: handleChange 함수 전달됨
  - userInput: 여러 숫자 값들을 담은 객체
- App 컴포넌트:
  - state 값들(duration, annualInvestment 등)이 hooks 하위에 표시됨

실시간 값 수정 기능

components 탭에서 state나 props의 값을 직접 수정 가능
예: duration을 12로 변경하면 즉시 UI가 재렌더링되어 그 효과를 확인할 수 있음

Profiler 탭 (성능 분석)

나중에 다룰 고급 주제
렌더링 시간과 성능 병목을 파악하여 앱을 최적화하는 데 사용

📑 Reference