React Native DevTools
React Native DevTools는 React Native를 위한 현대적인 디버깅 환경이다. 처음부터 목적에 맞게 설계되어 기존 디버깅 방법보다 더 통합적이고 정확하며 안정적이다.
React Native DevTools는 React 앱의 문제를 디버깅하기 위해 설계되었으며, 네이티브 도구를 대체하기 위한 것은 아니다. React Native의 기본 플랫폼 계층을 검사하려면(예: 네이티브 모듈 개발 시) Android Studio와 Xcode에서 제공하는 디버깅 도구를 사용한다(네이티브 코드 디버깅 참조).
💡 호환성 — 0.76 버전에서 출시
React Native DevTools는 Hermes를 실행하는 모든 React Native 앱을 지원한다. 이전의 Flipper, Experimental Debugger, Hermes debugger(Chrome) 프론트엔드를 대체한다.
이전 버전의 React Native에서는 React Native DevTools를 설정할 수 없다.
- Chrome 브라우저 DevTools — 지원되지 않음
chrome://inspect를 통해 React Native에 연결하는 기능은 더 이상 지원되지 않는다. 최신 버전의 Chrome DevTools(최신 브라우저 기능 및 API에 맞게 구축됨)는 테스트되지 않았으며, 이 프론트엔드는 우리의 커스터마이징이 적용되지 않았다. 대신 React Native DevTools와 함께 지원되는 버전을 제공한다.
- Visual Studio Code — 지원되지 않음 (기존)
- Expo Tools 및 Radon IDE와 같은 서드파티 확장 기능은 호환성이 개선되었을 수 있지만, React 팀에서 직접 지원하지는 않는다.
💡 피드백 & FAQ
우리는 모든 플랫폼에서 React를 디버깅할 때 사용하는 도구가 신뢰할 수 있고, 익숙하며, 간단하고, 일관되기를 원한다. 이 페이지에서 설명한 모든 기능은 이러한 원칙을 염두에 두고 구축되었으며, 앞으로 더 많은 기능을 제공하고자 한다.
우리는 React Native DevTools의 미래를 위해 적극적으로 반복 작업을 진행하고 있으며, 이슈, 자주 묻는 질문, 피드백을 추적하기 위해 중앙화된 GitHub 토론을 만들었다.
핵심 기능
React Native DevTools는 Chrome DevTools 프론트엔드를 기반으로 개발되었다. 웹 개발 경험이 있다면 이 툴의 기능이 익숙할 것이다. 시작하기에 앞서, Chrome DevTools 공식 문서를 살펴보는 것을 추천한다. 이 문서에는 상세한 가이드와 동영상 자료가 포함되어 있다.
콘솔
콘솔 패널에서는 메시지를 확인하고 필터링할 수 있으며, JavaScript를 평가하고 객체의 속성을 검사하는 등 다양한 작업을 수행할 수 있다.
유용한 팁
- 앱에서 많은 로그가 생성된다면, 필터 박스를 사용하거나 표시할 로그 레벨을 조정한다.
- Live Expressions을 통해 시간에 따른 값 변화를 관찰한다.
- Preserve Logs를 사용해 페이지를 새로고침해도 로그 메시지를 유지한다.
- Ctrl + L 단축키로 콘솔 화면을 지울 수 있다.
소스 및 브레이크포인트
Sources 패널을 사용하면 앱의 소스 파일을 확인하고 브레이크포인트를 등록할 수 있다. 브레이크포인트는 앱이 일시 중지될 코드 라인을 정의하는 데 사용된다. 이를 통해 프로그램의 현재 상태를 검사하고 코드를 단계별로 실행할 수 있다.
브레이크포인트로 코드 일시 중지 | Chrome DevTools
간단한 가이드
브레이크포인트는 디버깅 도구에서 가장 기본적이면서도 중요한 기능이다!
- 사이드바를 사용하거나 Cmd ⌘+P / Ctrl+P를 눌러 소스 파일로 이동한다.
- 코드 라인 옆에 있는 라인 번호 칼럼을 클릭해 브레이크포인트를 추가한다.
- 일시 정지된 상태에서 오른쪽 상단의 네비게이션 컨트롤을 사용해 코드를 단계별로 실행한다.
유용한 팁
- 앱이 일시 중지되면 "디버거에서 일시 중지됨" 오버레이가 나타난다. 이를 탭하면 실행을 재개할 수 있다.
- 중단점에 도달했을 때 오른쪽 패널에 주목하자. 현재 스코프와 호출 스택을 확인하고, 감시 표현식을 설정할 수 있다.
- 텍스트 편집기에서
debugger;구문을 사용해 빠르게 중단점을 설정할 수 있다. 이는 Fast Refresh를 통해 바로 디바이스에 적용된다. - 중단점에는 여러 종류가 있다! 예를 들어 조건부 중단점과 로그포인트가 있다.
메모리
Memory 패널을 사용하면 힙 스냅샷을 찍고, 시간에 따른 자바스크립트 코드의 메모리 사용량을 확인할 수 있다.
유용한 팁
- 힙에서 특정 객체를 검색하려면 Cmd ⌘+F / Ctrl+F를 사용한다.
- 메모리 할당 타임라인 리포트를 활용하면 시간에 따른 메모리 사용량을 그래프로 확인할 수 있으며, 메모리 누수를 식별하는 데 도움이 된다.
React DevTools 기능
통합된 컴포넌트(Components) 및 프로파일러(Profiler) 패널에서 React DevTools 브라우저 확장 프로그램의 모든 기능을 확인할 수 있다. 이러한 기능들은 React Native DevTools에서도 원활하게 작동한다.
React 컴포넌트
React Components 패널은 렌더링된 React 컴포넌트 트리를 검사하고 업데이트할 수 있다.
- DevTools에서 엘리먼트에 마우스를 올리거나 선택하면 기기에서 해당 엘리먼트가 강조 표시된다.
- DevTools에서 엘리먼트를 찾으려면 왼쪽 상단의 "엘리먼트 선택" 버튼을 클릭한 후 앱에서 원하는 엘리먼트를 탭하면 된다.
유용한 팁
- 컴포넌트의 props와 state는 런타임에 오른쪽 패널에서 확인하고 수정할 수 있다.
- React Compiler로 최적화된 컴포넌트는 "Memo ✨" 배지가 표시된다.
프로 팁: 리렌더링 강조 표시
리렌더링은 React 앱에서 성능 문제의 주요 원인 중 하나다. DevTools를 사용하면 컴포넌트가 리렌더링되는 시점을 실시간으로 강조 표시할 수 있다.
- 설정을 활성화하려면 View Settings(
⚙︎) 아이콘을 클릭하고 "Highlight updates when components render" 옵션을 선택한다.
React Profiler
React Profiler 패널은 컴포넌트 렌더링과 React 커밋의 타이밍을 이해하기 위해 성능 프로파일을 기록할 수 있게 해준다.
더 자세한 정보는 2018년 원본 가이드를 참고한다. (일부 내용이 현재와 다를 수 있음)
DevTools 재연결
가끔 DevTools가 타겟 디바이스와 연결이 끊길 수 있다. 이런 상황은 다음과 같은 경우에 발생할 수 있다:
- 앱이 종료된 경우
- 앱이 재빌드된 경우(새로운 네이티브 빌드가 설치된 경우)
- 앱이 네이티브 측에서 충돌한 경우
- 개발 서버(Metro)가 종료된 경우
- 물리적 디바이스의 연결이 끊긴 경우
연결이 끊기면 "디버깅 연결이 종료되었습니다"라는 메시지와 함께 다이얼로그가 표시된다.
이 시점에서 다음 두 가지 선택지가 있다:
- 닫기: 닫기(
×) 아이콘을 선택하거나 다이얼로그 외부를 클릭하면 연결이 끊기기 전의 마지막 상태로 DevTools UI로 돌아간다. - 재연결: 연결이 끊긴 원인을 해결한 후 "DevTools 재연결"을 선택한다.