어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ

리액트 크롬 디버깅_리렌더링 된 컴포넌트 하이라이트 하기 본문

개발/🟦 React

리액트 크롬 디버깅_리렌더링 된 컴포넌트 하이라이트 하기

비니_ 2025. 6. 5. 09:30
728x90

 

  • React 앱이 실행 중인 탭 열기
  • F12 또는 우클릭 → "검사" → 개발자 도구 열기
  • 상단에서 ⚛️ Components 탭 클릭 (없으면 React DevTools 설치 필요)
  • Components 창이 열리면, 오른쪽 위에 있는 세 줄짜리 버튼 (⋮ 또는 톱니바퀴 아이콘) 클릭
    (보통 탭 제목 오른쪽 상단에 있음)
  • "Settings" 또는 "설정" 메뉴 클릭
  • 사이드바에서 "General" 탭 선택
  • "Highlight updates when components render" 체크박스 체크 ✅

 

 

728x90

'개발 > 🟦 React' 카테고리의 다른 글

🟦[React] useState와 useImmer의 차이  (0) 2025.06.06
🟦[React] React의 화면 업데이트 3단계  (0) 2025.06.05
[React] app router_ 폴더 기준  (0) 2025.05.03
[React] 18버전 컴포넌트 props 매개변수 기본값 warning  (1) 2025.04.30
[React] hook, useMemo(), useCallback()  (0) 2025.04.29
'개발/🟦 React' Related Articles more
Comments