리액트 크롬 툴 소개 ( react developer tool )

리액트를 사용할 때 웹에서 보는 것 보다 더 유용하게 확인 가능한 툴을 소개한다 

 

리액트 개발자 툴 ( react developer tool )

 

 

 

기존에 이렇게 <div> 별로 나눠서 보이던 것들이 

컴포넌트(Components) 탭

내에서 트리구조로 확인이 간편하다.

 

 

 

 

 

이런 트리구조로 볼 수있는데, 여기서 제일 위에 NotificationList를 클릭하면, 

 

 

 

 

이렇게 리액트 상태값과 props가 확인이 가능하다 

 

 

 

그리고

프로파일러(Profiler) 탭

을 통해서는 

컴포넌트들이 랜더링 되는 과정들을 단계별로 사용할 수있다  

이 기능을 이용하여 랜더링되는 컴포넌트와 랜더링 시간, 왜 다시 랜더링 되었는지를 확인할 수 있다.

 

 

 

 

불필요한 랜더링과 무거운 것들을 찾아서 성능향상이 가능하다고 한다. 

 

 

구글에는 " react developer tool "이라고 검색하면 된다. 

 

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi