React 화면을 보다가 “이 값은 어느 API에서 왔지?”, “가만히 있는데 왜 계속 요청이 나가지?”를 따라가기 위해 react-data-xray(RDX)를 만들었습니다.
Network 탭에서는 요청을, React Profiler에서는 렌더를 볼 수 있지만 둘을 화면의 특정 컴포넌트와 연결하려면 코드를 오가며 찾아야 했습니다. 화면에서 요소를 고르고 그 주변의 데이터와 요청, 렌더를 함께 살펴볼 수 있으면 좋겠다는 생각에서 시작했습니다.
RDX는 개발 환경에서 사용하는 도구입니다. 화면 전체나 선택한 요소를 기준으로 다음 내용을 살펴볼 수 있습니다.
…