🚀 React Scan이 뭐죠?

https://news.hada.io/topic?id=17931

문제 상황

• 불필요한 컴포넌트가 렌더링이 되는지 확인하기 위해서 React Devtools의 Highlight updates when components render 옵션을 활성화했습니다

React Scan의 발견

• React Devtools에서는 Profiler를 통해서 해당 컴포넌트가 얼마나 걸려서 몇 번 호출되고, 렌더링 되는지를 확인할 수 있어서 잘 사용하고 있었습니다
• 제가 잘 못 사용하고 있는지는 모르겠지만, 불필요한 요소의 렌더링이 될 때 어떤 이유 때문인지를 명확하게 알기 어려워서 코드를 뚫어져라 찾아보고, 콘솔에 로그를 찍어봐야 하는 일들이 많았습니다
• 불편함이 있던 와중에 React Scan을 발견하게 되었고, 최소한의 코드 변경으로 사용할 수 있는 라이브러리 인것 같아 바로 도입하게 되었습니다

React Scan 사용기

https://github.com/aidenybai/react-scan

React Scan 시작하기

설정하기

React Scan의 깃허브 사이트에 다행히 설명이 잘 되어 있어서 적용하기 수월했습니다

• 딱 우리 프로젝트인 Vite환경에 대한 명확한 방법이 적혀있어서 바로 도입했습니다

• 화면 하단에 이런 툴팁이 생겼습니다

사용 후기

1. index.html에 script를 작성하고 실수로 배포 브랜치에 올렸는데, 모든 사람들이 react scan을 사용할 수 있게 되어버렸습니다

• React devtools와 같이 브라우저에 설정되어 있는게 아니라 프로젝트 내부에서 설정하다보니, 배포 브랜치에 올리니 모두가 사용하게 되었습니다