React Developer Tool

React 는 Component들을 기반으로 UI를 만든다.  React DOM 라이브러리는  React element에 맞추어 실제 DOM을 업데이트하며, 이 컨셉을 Virtual DOM이라고 표현하기도 한다.

개발자 도구 Element tab에서는 rendering 완료된 형태의 html을 확인할 수 있다.

위 화면은 영화 목록을 보여주는 react 프로젝트를 개발자도구로 확인한 것이다. 각 영화 정보는 <Movie/> 라는 컴포넌트를 통해 만들어졌지만 Element tab에는 html code로만 기술되어 있는 것을 확인 할 수 있다. 

 

하지만 경우에 따라 real tag가 아닌 react 상에서의 component 구성을 확인 해 보고 싶을 수 있다. 

 

chrome 확장도구에서 받을 수 있다.

그렇다면 위와 같이 브라우저의 웹스토어에서 React Developer Tool을 추가하면 된다. 설치하면 주소창 옆에 react 마크가 생겨난다.

 개발자도구는 지속적으로 업데이트 되고 있다. 현재(2021/4/22) 시점으로 3일전에 업데이트 되었다. full opensource 로 github.com/facebook/react/tree/master/packages/react-devtools-extensions 경로에서 확인할 수 있다.

 

 

React Developer Tool 인만큼 React를 사용한 페이지에만 사용할 수 있다. 

리엑트를 사용하지 않은 페이지에서 아이콘을 누를 경우 위와 같은 메세지가 나온다.

 

리엑트를 사용하여 만든 페이지를 열어 볼때는 위와 같은 메세지가 나온다. 그리고 설명에 써있다시피 개발자도구에서 Component, Profiler 라는 새로운 탭이 추가된다.

 디버깅 용도 이외에 어떤 사이트들이 리엑트를 사용해서 개발을 했는지 확인해 볼 수도 있을 것 같다. 지금 이 글을 쓰고 있는 Tistory 도 React로 만들어져 있다. 

 

 

 

마지막으로 현재 개발중인 프로젝트를 npm run start를 통해 로컬 포트에 띄워서 확인했을 때는 위와 같은 메세지가 뜬다. 색이 빨간색인게 다른데 Error 메세지는 아니고 build가 배포하기에 적합하지 않다는 내용이 나온다. 마찬가지로 개발자 도구에 두개의 새로운 탭이 추가된다. 

 npm run build로 배포 버전을 만든 뒤 serve 를 통해 배포하면 위 메세지는 나타나지 않고 두번째 사진과 같은 메세지가 출력된다.

React Developer Tool을 통한 Component 확인

앞서 Element Tab에서 봤던 동일한 페이지를 Component Tab으로 열어보았다. <App/> Component 아래에 각 영화들이 <Movie/> Component로 이루어져 있음을 한눈에 알 수 있다. 각 Component들을 클릭하면 우측에 props 속성과 어디에서 Render 되었는지에 대한 정보들도 확인할 수 있다.

 

 

여기서 끝내기 아쉬우니까 React 를 이용해 개발된 Tistory 페이지도 한번 살펴보자.

 

 

배포버전이기 때문에 source 파일은 나오지 않고, 트리에 있는 Component 이름들도 개발환경과는 다를 것이다. 하지만 마찬가지로 Tree 형태로 각 Component의 구성과 prop을 확인할 수 있다. 위의 그림은  ❤공감 여부와 전체 공감 개수를 관리하는 Component이다. 이제 여기서 공감 을 누르면...

 

reactionActivated의 상태가 "like"로 변경되고 like와 sum 개수가 올라갔다. 반대로 React Developer Tool의 정보를 바꾸어서 화면에 표시되는 정보를 바꿀 수 도 있다.

 

 

여기까지.. React 개발의 생산성을 향상시킬수 있는 도구 React Developer Tool 이었습니다!