<aside>
React Scan은 아래와 같이 최적화가 필요한 컴포넌트를 브라우저에서 시각적으로 표시해주는 도구다.
</aside>
React Scan은 million이라는 VS Code extension을 만든 개발자 Aiden Bai가 개발한 오픈소스 도구다.
참고로 million은 리액트 앱에서 느린 코드를 빠르게 찾고 고칠 수 있게 해주는 VS Code extension이라고 보면 된다.
million이 VS Code extension 형태로 최적화에 도움을 주는 도구라면,
React Scan은 아래와 같이 최적화가 필요한 컴포넌트를 브라우저에서 시각적으로 표시해주는 도구다.
이러한 시각적인 단서를 통해 렌더링이 느린 컴포넌트를 빠르게 찾아내고 최적화를 진행할 수 있다.
다만, React Scan이 최적화까지 알아서 해주는 것은 아니고, 성능 최적화가 필요한 컴포넌트를 파악하는데만 도움을 준다.
그리고 앞에서 소개해드린 million을 활용하면 컴포넌트 렌더링 최적화에 도움을 받을 수 있다.
리액트 컴포넌트는 기본적으로 state가 변경되거나 props가 변경되었을 때 재렌더링이 발생한다.
하지만 이러한 재렌더링이 발생하는 모든 상황을 개발자가 개발 과정에서 일일이 다 확인하기란 쉽지 않다.
특히 props의 경우에는 값이 아닌 참조로 비교하는데,