#Render Profiling

React 컴포넌트 렌더링을 프로파일링하는 도구입니다. 핫 컴포넌트, 불필요한 리렌더, 최적화 기회를 식별할 수 있습니다.

#렌더 하이라이트 (시각 오버레이)

**start_render_highlight**와 **stop_render_highlight**는 리렌더되는 컴포넌트 주변에 디바이스 화면에 색상 사각형을 그립니다(react-scan 스타일). 앱과 상호작용할 때 UI의 어느 부분이 갱신되는지 확인할 수 있습니다.

• 시작: start_render_highlight (선택 인자: whitelist, showLabels, fadeAfterMs, maxHighlights). 앱 로드 시 Babel 프리셋 옵션 renderHighlight: true(기본 스타일 react-mcp) 또는 renderHighlight: { style: 'react-scan' }로 켤 수도 있습니다 — 설치 및 연결 참고.
• 중지: stop_render_highlight로 모든 오버레이 사각형 제거.

VS Code DevTools Renders 패널의 "Highlight" 버튼으로도 이 도구를 호출할 수 있습니다.

#start_render_profile

렌더 프로파일링을 시작합니다. 컴포넌트의 마운트, 리렌더, 부모 리렌더로 인한 불필요한 렌더를 추적합니다.

#Parameters

#Example

// 모든 컴포넌트를 프로파일링
{ "tool": "start_render_profile" }

// 특정 컴포넌트만 프로파일링
{
  "tool": "start_render_profile",
  "arguments": { "components": ["ProductList", "CartScreen", "Header"] }
}

// 노이즈가 많은 컴포넌트 무시
{
  "tool": "start_render_profile",
  "arguments": { "ignore": ["AnimatedView", "SafeAreaView"] }
}

#Tips

• components를 사용하여 특정 화면이나 기능에 집중할 수 있습니다.
• ignore를 사용하여 노이즈를 발생시키는 프레임워크 컴포넌트를 필터링할 수 있습니다.
• 프로파일링 시작 → 사용자 액션 수행 → get_render_report 호출 순서로 결과를 확인합니다.

#get_render_report

렌더 프로파일링 리포트를 가져옵니다. 핫 컴포넌트, 불필요한 렌더, 트리거 분석이 포함된 최근 렌더 상세 정보를 보여줍니다.

#Parameters

#Example

// Request
{ "tool": "get_render_report" }

// Response
{
  "hotComponents": [
    { "component": "ProductCard", "renderCount": 24, "mountCount": 6 },
    { "component": "PriceLabel", "renderCount": 18, "mountCount": 6 }
  ],
  "unnecessaryRenders": [
    {
      "component": "Header",
      "count": 12,
      "message": "Header re-rendered 12 times without prop changes — wrap with React.memo"
    }
  ],
  "recentRenders": [
    {
      "component": "ProductCard",
      "timestamp": 1700000001234,
      "trigger": "parent",
      "changedProps": []
    }
  ]
}

#Tips

• hotComponents는 렌더 횟수 기준으로 정렬됩니다 — 상위 항목이 최적화 대상입니다.
• unnecessaryRenders는 props 변경 없이 리렌더된 컴포넌트를 식별합니다 — React.memo로 감싸면 이를 방지할 수 있습니다.
• trigger: "parent"는 해당 컴포넌트가 자체 props 변경이 아닌 부모 리렌더로 인해 리렌더되었음을 의미합니다.

프로파일링을 중지하고 데이터를 비우려면 통합 clear 도구에 target: "render_profile"을 사용하세요.

{ "tool": "clear", "arguments": { "target": "render_profile" } }

프로파일링이 끝나면 호출하여 오버헤드를 중지하세요. 삭제 후에는 데이터를 복구할 수 없으므로, 먼저 get_render_report 결과를 저장해 두세요.