안녕하세요 웹 YB 김다현입니다!
혹시 다들 React 개발자 도구에 대해서 들어보셨나요?
저는 놀랍게도 미미나를 들으면서 이 툴의 존재를 처음 알았답니다... 그래도 지금이라도 알게 해주신 전 팟장님께 감사인사를...
저는 지금까지 어떤 개발을 해온 걸까요 ㅎㅎ? 역시 알아도 알아도 끝이 없는 리액트네요 😮💨
그런 김에! 이 아티클을 작성하면서 저도 직접 설치해보고, 어떤 기능이 있는지 알아보려고 합니다.
혹시 저처럼 이번에 처음 알게 된 웨비들이 있다면 같이 설치하고 공부해봐요 🫶
⚡ React Dev Tools?
리액트로 개발하다 보면 내가 만든 컴포넌트들이 지금 어떻게 상태를 주고받고 있는 건지 등등이 궁금할 때가 많지 않나요?!
이때 이 툴을 쓰면 정말... 큰 도움이 될 것 같더라구요. 리액트 공식 문서에서도 이 툴을 사용하면 React 컴포넌트를 검사하고 props와 state를 편집할 수 있으며 성능 문제를 식별할 수 있다고 말하고 있답니다!
React Dev Tools의 정의를 한 마디로 정리하자면,
React 애플리케이션을 디버깅하고 최적화할 수 있는 브라우저 확장 도구
라고 할 수 있어요. 이름 그대로 리액트에 특화되어있는 개발자 도구라고 보면 돼요.
이 툴을 쓰면 구체적으로 어떤 점에서 도움이 되는지 좀 더 말해보자면! 예를 들어 화면에서 특정 버튼을 클릭했는데 어떤 컴포넌트의 상태가 바뀌었는지 확인하고 싶다고 해봅시다. 이때 바로 React DevTools가 컴포넌트의 상태와 props의 변화를 시각적으로 보여줘요. 앱의 내부 구조를 편하게 해부할 수 있어요 ㅎㅎ 💀 내부에서 일어나는 일을 보여주는 창문이라고 생각하면 편해요.
📂 그래서 어떻게 설치해?
브라우저 확장 프로그램을 통해 간단하게 설치가 가능해요.
(아래에 각 브라우저별로 확장 프로그램 설치할 수 있는 링크 있으니 각자에 맞는 브라우저에 들어가서 설치하기!)
🔗 https://ko.react.dev/learn/react-developer-tools
React Developer Tools – React
The library for web and native user interfaces
ko.react.dev
설치가 완료되고 난 후에, 리액트로 구축된 사이트를 들어가면 아래처럼 팝업창이 떠요!
저도 리액트로 만든 프로젝트 사이트에 들어가봤는데 잘 뜨더라구요. 그리고 F12를 눌러 개발자 도구에 들어가면 리액트 관련 탭이 추가된 걸 확인할 수 있어요! (노란 밑줄 부분)
⚠️ 주의!
앱이 development 모드에 있어야 전체 기능을 완벽히 활용할 수 있다고 해요.
만약 production 모드로 빌드된 경우에는 컴포넌트 명이 임의 문자로 변경되고 Profiler 기능은 기본적으로 비활성화 됩니다!
한 마디로, 배포된 프로젝트가 아니라 로컬로 실행되고 있어야 된다는 뜻! 😊
🔥 어떤 기능들이 있을까?
이제 설치를 마쳤으니 이제 어떤 기능을 제공해주는지 알아볼까요? React DevTools에는 크게 Components와 Profiler라는 두 가지 주요 탭이 있어요. 먼저 Components 탭에 어떤 기능이 있는지 알아봅시다... (⸝⸝> ᴗ•⸝⸝)
⚛️ Components 탭
React DevTools에서 아마 가장 많이 사용하게 될 탭이 아닐까 싶은데요. (아닌가...?)
이 탭은 앱의 컴포넌트 구조를 시각적으로 탐색할 수 있는 기능을 제공해서 앱이 어떻게 구성되어 있는지 한눈에 파악할 수 있답니다.
각 컴포넌트가 현재 어떤 데이터를 가지고 있고, 어떻게 연결되어 있는지 등을 살펴볼 수 있어요.
컴포넌트 트리구조 보기
이 탭을 클릭하면 위 사진처럼 앱의 컴포넌트 트리 구조가 한눈에 보여요. 이 구조를 통해 각 컴포넌트가 서로 어떻게 연결되어 있고, 현재 어떤 상태와 props를 가지고 있는지 바로 확인할 수 있어요. 특정 컴포넌트를 클릭하면 해당 컴포넌트의 props, state, 그리고 context와 같은 중요한 정보들을 오른쪽에서 확인할 수 있답니다. 상태가 변할 때마다 이 정보들이 실시간으로 업데이트되기 때문에 상태 변화가 예상대로 이루어지는지 확인할 수 있다고 하네요...!
App 컴포넌트를 펼치니 CounterProvider, CounterDisplay, CounterButton 순으로 자식 컴포넌트들이 계층 구조로 나타나는 거 보이시나요?! 이 계층 구조를 통해 컴포넌트들이 어떻게 연결되어 있는지 쉽게 파악할 수 있어요.
컴포넌트 선택과 속성 확인
Components 탭에서 특정 컴포넌트를 클릭하면 오른쪽 패널에 해당 컴포넌트의 상세 정보가 표시돼요. 콘솔에 별도로 console.log(...)로 로그를 남기지 않고도 컴포넌트가 가지고 있는 state, props의 값을 확인할 수 있어요.
그리고 렌더링 된 컴포넌트의 값을 브라우저에서 즉석으로 수정해 볼 수 있는 편집 기능도 존재해요. 페이지를 새로 불러오지 않고도 변경 사항이 실시간으로 반영되기 때문에 신속하게 변경에 따른 변화를 테스트해볼 수 있겠죠?!
컴포넌트 데이터 로깅
클릭 한 번으로 컴포넌트가 보유하고 있는 모든 데이터를 콘솔 창에 기록할 수 있어요.
이 데이터에는 props, hooks, DOM에 있는 노드, 시스템에서의 파일 위치 등 컴포넌트와 관련된 모든 내용이 포함돼요!
추가로, 렌더링 시 하이라이트 기능이 있는데요!
왼쪽 이미지처럼 "General > Highlight updates when components render" 체크를 하면 re-rendering 되는 컴포넌트가 있을 때마다 컴포넌트의 경계 부분을 강조 표시해준답니다. 이를 통해 컴포넌트 렌더링 빈도와 성능을 시각적으로 확인할 수 있어요.
컴포넌트가 렌더링 되는 빈도에 따라 강조 표시되는 색상도 변하는데,
파란색 -> 녹색 -> 노란색 -> 빨간색 순으로 빈번하게 렌더링 됨을 의미한다고 하니 참고하기!
🕵️ Profiler 탭
그리고 Profiler 탭이 있는데, 이 도구는 앱이 얼마나 효율적으로 작동하고 있는지 분석해줘요. 컴포넌트들이 얼마나 자주, 그리고 왜 다시 렌더링 되고 있는지를 기록해서 보여준답니다. 각 컴포넌트가 상태나 props 업데이트 때문에 다시 그려질 때가 있겠죠? 이런 렌더링 과정과 빈도를 시각적으로 확인할 수 있게 해주는 게 바로 Profiler예요.
프로파일러 사용하기
Profiler 탭을 열고 Record 버튼을 클릭하면 렌더링 과정을 기록할 수 있어요.
저 파란 버튼이 바로 Record 버튼인데요. 누르고 나서 작업을 한 후, 작업들이 끝나면 빨간 버튼을 눌러 Record를 중지해요.
그러면 Profiler가 각 컴포넌트가 얼마나 자주 렌더링되었는지, 렌더링에 얼마나 시간이 걸렸는지 보여준답니다.
Profiler 탭에서는 여러 차트들을 확인할 수 있는데요! 한 번 살펴볼까요?
📊 Commit Chart
Commit Chart는 애플리케이션이 실행되는 동안 발생한 커밋을 시간 순서대로 보여주는 그래프예요. 여기서 커밋은 React가 애플리케이션을 다시 그려야 했던 이벤트를 의미해요. 이 그래프를 통해 전체 렌더링 패턴과 시간 경과에 따른 성능 변화를 파악할 수 있답니다.
각각의 수직선이 커밋 이벤트를 나타내고, 수직선의 높이와 색상이 렌더링 소요 시간을 뜻해요. 수직선이 많을수록 렌더링이 자주 발생한 것이고, 수직선이 높을수록 렌더링에 많은 시간이 걸렸다는 것을 의미해요. 녹색은 렌더링 시간이 상대적으로 짧은 경우, 노란색이나 주황색은 렌더링 시간이 긴 경우를 나타내요. 주황색으로 표시된 커밋은 최적화가 필요할 수 있는 부분을 의미할 수도 있어요!
그리고 위의 사진처럼 특정 커밋 위에 마우스를 올리면 세부 정보 팝업이 뜨는데요.
이에 대한 설명을 간단하게 정리해봤어요. 궁금하면 펼쳐보기~
Priority (우선순위) 해당 렌더링의 우선순위를 나타내며, 위의 사진에서 "Immediate"는 즉시 실행이 필요한 렌더링임을 뜻해요.
Committed at 커밋이 발생한 시점을 초(second) 단위로 표시해줘요.
Durations (소요 시간)
Render 컴포넌트가 렌더링되는 데 걸린 시간이에요. 위의 사진을 예시로 들자면 31.7ms가 소요되었다고 볼 수 있겠죠?!
Layout effects DOM에 영향을 미치는 레이아웃 효과에 걸린 시간을 뜻해요.
Passive effects 이벤트 리스너와 같은 부수 효과에 걸린 시간을 뜻해요.
이제 여기서 특정 커밋을 클릭하면, 해당 렌더링에서 어떤 컴포넌트가 성능에 영향을 미쳤는지 Flame Chart에서 확인할 수 있어요.
Flame Chart에 대해서도 알아볼까요?
📈 Flame Chart
Flame Chart는 특정 커밋에 어떤 컴포넌트들이 렌더링되었는지를 시각적으로 보여주는 차트예요.
이 친구는 성능 분석에 아주 유용한 도구예요! 각 컴포넌트가 렌더링되는데 걸린 시간을 한눈에 파악할 수 있도록 도와준답니다.
컴포넌트의 렌더링이 어떻게 이루어졌는지를 트리 구조로 나타내고, 렌더링 시간이 긴 컴포넌트를 쉽게 찾아낼 수 있도록 해줘요.
Flame Chart에서 각 컴포넌트는 가로 막대로 나타나요. 막대의 길이는 해당 컴포넌트가 렌더링되는 데 걸린 시간을 나타내는 건데, 혹시 성능이 느리다면 긴 막대를 중심으로 최적화를 고려해보면 좋겠죠?!
가로 막대의 색상도 중요한데, 색상이 진할수록 렌더링 시간이 길었다는 의미예요. 예를 들어, 노란색이나 주황색으로 표시된 컴포넌트는 렌더링에 상대적으로 오랜 시간이 걸린 컴포넌트예요. 성능이 걱정된다면 진한 색상으로 표시된 컴포넌트가 있는지 찾아보기!
이렇게 React DevTools 에 대해 간단하게 알아봤는데요!
이건 정말 수많은 기능들의 작은 일부일 뿐이니 다들 한 번 이 툴에 대해 학습해봐도 좋을 것 같아요.
한 번 학습하고 나면 프로젝트 할 때마다 편해질 테니...ㅎㅎ
'3주차' 카테고리의 다른 글
| React에서 중복 로직을 해결하는 법 (0) | 2024.11.02 |
|---|---|
| [React] children prop과 친해지자 (0) | 2024.11.02 |
| DOM과 React 랜더링 (0) | 2024.11.02 |
| 리액트 Hooks - useState, useEffect (0) | 2024.11.02 |
| 리액트 개발자 도구로 개발력 향상시키기 (0) | 2024.11.02 |
