React DevTools 프로파일러에서 누락된 컴포넌트 props의 수수께끼
최적화 세계로 뛰어들고 있는 React 개발자라면 React DevTools 프로파일러가 자세한 컴포넌트 props를 보여주는 학습 자료를 접할 수 있습니다. 그러나 프로파일러에서 어떤 props도 볼 수 없는 상황에 처한 경우를 겪을 수 있습니다. 이 문제가 왜 발생하는지와 이를 해결하는 방법에 대해 자세히 알아보겠습니다.
레거시 vs 새로운 DevTools 확장판
새로운 DevTools 확장판이 소개되기 전에는 레거시 버전에는 자체적인 단점이 있었습니다. 큰 앱에서는 상당한 성능 오버헤드를 초래하여 사용하기 어려워졌습니다. 이에 대응하여 새로운 DevTools 확장판이 소개되었으며, 이는 프론트 엔드(확장판, Component 및 프로파일러를 포함하는 것)과 백 엔드 간의 통신을 최소화하기 위한 개선 사항을 포함하고 있습니다.
컴포넌트 props 표시의 변경 사항
새로운 DevTools 확장판은 성능 최적화를 가져왔지만, 이로 인해 프로파일러에 컴포넌트 props가 표시되는 방식도 변경되었습니다. 이전에는 프랍 이름과 값을 포함한 자세한 컴포넌트 props를 볼 수 있었습니다. 그러나 현재 버전에서는 표시되는 정보가 그렇게 포괄적이지 않습니다.
프로파일러는 여전히 프롭이 변경된 경우를 나타내지만, 프롭의 값은 표시되지 않습니다. 또한 프로파일러에는 사용자 정의 훅의 이름도 표시되지 않습니다. 프로파일러에서 프롭 값 및 사용자 정의 훅 이름이 표시되지 않는 것은 변경 내역에 명시적으로 언급되지 않았으며, 이로 인해 혼동이 발생할 수 있습니다.
프로파일러에서 현재 렌더링 컴포넌트 props를 어떻게 볼 수 있을까요?
기본적으로 프로파일러에서 프롭 값은 표시되지 않지만, 여전히 액세스할 수 있습니다. 다음은 그 방법입니다:
1. 프로파일러에서 관심 있는 컴포넌트를 선택합니다.
2. 컴포넌트 드롭다운에서 "Props" 탭으로 이동합니다.
3. 원하는 렌더링 단계로 타임라인을 스크롤합니다.
4. 컴포넌트 인스턴스를 클릭하여 렌더링 시간과 props의 자세한 분석을 확인합니다.
5. "Flamegraph" 섹션에서 "Input" 열 아래에서 프롭 값이 확인됩니다.
이러한 단계를 따라서, 메인 프로파일러 화면에서 직접 볼 수 없더라도 현재 렌더링 단계의 프롭 값을 얻을 수 있습니다.
결론
요약하면, React의 새로운 DevTools 확장판은 프론트 엔드와 백 엔드 간의 통신을 최소화하여 성능을 최적화합니다. 그러나 이 최적화로 인해 프로파일러에 컴포넌트 프롭이 표시되는 방식이 변경되었습니다. 프로파일러의 주된 화면에서는 프롭 값과 사용자 정의 훅의 이름이 더 이상 표시되지 않지만, 위에서 설명한 단계에 따라 프롭 값에 여전히 접근할 수 있습니다. 혼동을 피하고 원활한 개발 경험을 위해 최신 문서와 변경 로그를 정기적으로 확인하는 것이 중요합니다.
