Show GN: RDX, React 화면에서 API 출처와 반복 렌더를 찾는 개발 도구

React 화면을 보다가 “이 값은 어느 API에서 왔지?”, “가만히 있는데 왜 계속 요청이 나가지?”를 따라가기 위해 react-data-xray(RDX)를 만들었습니다.

Network 탭에서는 요청을, React Profiler에서는 렌더를 볼 수 있지만 둘을 화면의 특정 컴포넌트와 연결하려면 코드를 오가며 찾아야 했습니다. 화면에서 요소를 고르고 그 주변의 데이터와 요청, 렌더를 함께 살펴볼 수 있으면 좋겠다는 생각에서 시작했습니다.

RDX는 개발 환경에서 사용하는 도구입니다. 화면 전체나 선택한 요소를 기준으로 다음 내용을 살펴볼 수 있습니다.

특히 요청과 렌더가 비슷한 시점에 발생했다는 이유만으로 원인과 결과라고 단정하지 않으려고 했습니다. 응답 데이터의 참조를 추적한 연결과 시간상 가까워 추정한 연결을 구분합니다. 반복 호출이나 렌더도 곧바로 버그라는 뜻은 아닙니다. 폴링처럼 필요한 동작인지, 줄일 수 있는 동작인지는 코드를 확인해야 합니다.

수정 전후를 비교하는 기능도 넣었습니다. 기록을 초기화하고 같은 동작을 수행한 뒤 스냅샷을 남겨, 변경 후 요청과 렌더가 어떻게 달라졌는지 비교하는 방식입니다.

AI 코딩 도구와 함께 쓰기 위한 rdx-perf 스킬도 만들었습니다. 측정 결과에서 의심되는 부분을 찾고, 관련 코드를 읽고, 수정한 뒤 다시 측정하는 흐름입니다. 렌더가 많다는 이유로 무조건 memo를 붙이거나, 요청이 많다는 이유로 캐시 시간을 늘리는 식의 수정을 피하고 싶었습니다.

React Query를 쓰거나 폴링이 많은 화면에서 사용해 보신 분들의 의견이 궁금합니다. 특히 정상적인 동작을 문제처럼 보여주는 경우, 반대로 반복 요청이나 렌더를 놓치는 경우를 알려주시면 도움이 될 것 같습니다.

GitHub: y0ngha/react-data-xray (https://github.com/y0ngha/react-data-xray)