한 입 크기로 잘라먹는 리액트앞선 절에서 useEffect를 이용해 State 값이 바뀌면 콘솔에 그 값을 출력했습니다.
그러나 복잡한 리액트 앱을 개발하는 과정에서 State 값이 변경될 때마다 useEffect 를 수정하고 console.log로 확인한다면 이는 무척 번거로운 일이 될 겁니다.
따라서 이번 절에서는 리액트 앱을 개발할 때 매우 유용하게 사용하는 리액트 개발자 도구(React Developer Tools)를 소개하려 합니다.
리액트 개발자 도구 설치하기
리액트 개발자 도구는 확장 도구로서 크롬 브라우저에 설치해 사용합니다. 크롬 확장 프로그램을 설치한 경험이 있는 독자라면 쉽게 설치할 수 있겠지만, 처음 써보는 독자라면 설치 과정이 어려울 수 있으므로 차근차근 살펴보겠습니다.
리액트 개발자 도구를 설치하려면 다음 링크를 클릭하거나 구글 홈페이지에서 ‘Chrome 웹 스토어’를 검색해 접속합니다.
접속하면 다음 그림과 같은 [Chrome 웹 스토어] 페이지가 나옵니다.
왼쪽 메뉴 ‘확장 프로그램 검색’ 폼에서 ‘React Developer Tools’라고 입력하고 <Enter>키를 누릅니다. [chrome 웹 스토어] 확장 프로그램 페이지가 나옵니다.
검색 결과로 나온 프로그램에서 첫 번째에 있는 React Developer Tools를 클릭합니다.
React Developer Tools 상세 페이지로 이동합니다. 상세 페이지 우측에 보이는 파란색 <Chrome에 추가> 버튼을 클릭합니다.
설치는 바로 진행됩니다. 사용하고 있는 PC 환경에 따라 권한 관련 경고 대화상자가 나타날 수 있는데, <확장 프로그램 추가> 또는 <권한 모두 허용> 버튼을 클릭해 설치합니다. 설치를 완료하면 <Chrome에 추가> 버튼이<Chrome에서 삭제> 버튼으로 변경됩니다.
모든 설치를 완료했으면 확장 프로그램의 설정을 확인해야 합니다. 크롬 브라우저 우측 상단의 확장 아이콘을 선택하면 나오는 메뉴에서 [도구 더보기]-[확장 프로그램]을 차례로 클릭합니다.
[확장 프로그램] 페이지가 나옵니다.
방금 설치한 React Developer Tools를 찾아 스위치를 On으로 설정한 다음, <세부정보> 버튼을 클릭합니다.
[세부 정보] 페이지가 나옵니다. 세부 정보 페이지에서 다음과 같이 옵션을 설정합니다.
- 사용: ON
- 사이트 엑세스: 모든 사이트에서
- 시크릿 모드에서 허용: 시크릿 모드에서 리액트 개발자 도구를 사용하려면 ON, 그렇지 않으면 자유롭게 설정합니다. 잘 모르겠다면 ON으로 설정합니다.
- 파일 URL에 대한 엑세스 허용: ON
마지막으로 브라우저 우측 상단에서 퍼즐 모양으로 생긴 ‘확장 프로그램’ 아이콘을 클릭해 React Developer Tools의 핀을 고정합니다.
핀을 고정하면 크롬 브라우저 우측 상단에 리액트 개발자 도구 아이콘 과 현재 상태가 표시되므로 잘 동작 하는지 쉽게 확인할 수 있습니다.
설치 확인하기
리액트 개발자 도구가 제대로 설치 되었는지 확인하겠습니다. 비주얼 스튜디오 코드에서 첫 번째 프로젝트 카운터 앱을 npm run start로 시작합니다. 크롬 브라우저 우측 상단에 주황색의 리액트 개발자 도구 아이콘이 나타나는지 확인합니다.
리액트 개발자 도구 아이콘이 나타난다면 일단 정상적으로 설치된 겁니다. 이 아이콘을 클릭하면 현재 페이지는 개발 모드에서 리액트를 사용하고 있다고 알려 줍니다.
만약 아이콘이 나타나지 않는다면 키보드의 <F5> 키를 눌러 새로고침하거나 브라우저를 종료했다 다시 실행해야 합니다. 그래도 안 된다면 리액트 개발자 도구가 제대로 설치 되지 않은 것이니 설치 과정을 처음부터 꼼꼼하게 다시 진행해야 합니다.
아이콘이 잘 나타난다면 개발자 도구를 열고, 탭 메뉴에서
>> 모양의 더 보기 아이콘을 클릭 합니다. 메뉴에서 [Components]와 [Profiler] 탭이 추가 되었는지 확인합니다.[Components]와 [Profiler] 탭은 리액트 개발자 도구가 제공하는 기능입니다. 컴포넌트 계층 구조의 확인이나 성능 측정 등 개발에 필요한 유용한 기능들이 있습니다.
[Components] 탭에서는 현재 리액트 앱의 컴포넌트 트리와 각 컴포넌트가 관리하는 State 등의 정보를 확인할수 있습니다. [Profiler] 탭은 리액트 컴포넌트의 렌더링 성능을 측정합니다. 이 책에서는 [Components] 탭의 기능만을 주로 다룰 예정입니다.
지금까지 문제없이 잘 진행해 왔다면 리액트 개발자 도구를 크롬 브라우저에 정상적으로 설치한 겁니다.
리액트 개발자 도구의 기능 사용하기
설치를 모두 마쳤다면 리액트 개발자 도구가 제공하는 여러 유용한 기능을 실제로 사용해 보겠습니다.
컴포넌트 트리 살펴보기
컴포넌트 트리는 리액트 개발자 도구에서 가장 많이 사용하는 기능입니다. 개발자 도구의 [Components] 탭을 클릭합니다.
[Components] 탭은 현재 렌더링된 카운터 앱의 컴포넌트 트리를 시각적으로 보여주고 있습니다. 컴포넌트 트리를 보면 App를 루트 컴포넌트로 하여 그 아래에 Viewer, Even, Controller 3개의 자식 컴포넌트가 있는 것을 볼 수 있습니다.
App를 클릭하면 해당 컴포넌트의 Props와 State를 실시간으로 모니터링할 수 있습니다. 리액트 훅의 기능인 State, Ref, Effect 등이 표시된 것도 확인할 수 있습니다.
State 모니터링하기
[Components] 탭에서 실시간으로 변하는 State 값을 잘 모니터링하는지 살펴보겠습니다.
카운터 앱 페이지에서 <+10> 버튼을 눌러 현재 카운트를 10으로 변경합니다. 계속해서 [Components] 탭에서 App를 클릭해 첫 번째 State 값(변수 count)이 10으로 변경되는지 확인합니다.
App 컴포넌트의 State 값이 0에서 10으로 변경되었음을 알 수 있습니다.
Props 모니터링하기
이번에는 Props를 확인하겠습니다. [Components] 탭에서 Viewer 컴포넌트를 클릭합니다.
Viewer는 App 컴포넌트가 전달한 State 변수 count를 Props로 받아 페이지에 렌더링하는 컴포넌트입니다. 실습에서 Viewer 컴포넌트는 값 10을 Props로 받는데, 리액트 개발자 도구의 [Components] 탭에도 이 값이 잘 나타나고 있습니다.
리렌더 하이라이트 기능 사용하기
이번에는 리렌더가 발생한 컴포넌트를 하이라이트하는 기능을 사용하겠습니다.
이 기능을 이용하면 어떤 컴포넌트가 의미 없이 리렌더되는지 알 수 있어 향후 렌더링 최적화에 크게 도움을 줍니다. [Components] 탭 검색 폼 옆에 있는 톱니 모양의 View Settings 아이콘을 클릭합니다.
View Setting 아이콘을 클릭하면 별도 설정이 가능한 대화상자가 나타납니다.
대화상자 [General] 탭에서 “Highlight updates when component render.”라고 쓰여 있는 체크박스에 표시합니다.
이 기능을 활성화하면 컴포넌트를 렌더링할 때마다 하이라이트가 나타납니다.
리렌더 하이라이트 기능은 [Components] 탭이 열려 있 어야 확인할 수 있습니다.
카운터 State가 어떻게 하이라이트되는지 확인합니다. 설정 대화상자를 닫은 다음, 페이지에서 <+> 또는 <-> 버튼 중 아무거나 클릭합니다. 마우스 버튼을 빠르게 눌러 State를 계속 업데이트합니다.
카운트 State가 업데이트 되어 컴포넌트가 리렌더할 때마다 전체 컴포넌트 영역이 초록색에서 점차 노란색으로 변합니다. 노란색일수록 빠른 시간 내에 많은 리렌더가 발생했다는 의미입니다.
앞으로 프로젝트를 진행하면서 리액트 개발자 도구를 이용해 데이터의 변경사항을 모니터링할 예정입니다. 따라서 이 도구에 대해서는 충분히 숙지해주길 바랍니다.