이제 이 섹션에서 마지막으로 중요한 것은
추가 확장 프로그램을 여러분께 알려드리고 싶습니다
브라우저에 설치해서
리액트 개발자로서의 삶을 더 편하게 만들어줍니다
그 확장 프로그램은
리액트 개발자 툴 이라고 검색하면 나옵니다
이 React Developer Tools 확장 프로그램이 바로
제가 여러분께 알려드리고 싶은 것입니다
아직 이 확장 프로그램이 없다면
이 페이지에 오른쪽에 설치 버튼이 보이는데
이것으로 여러분의 브라우저에
즉, 크롬 브라우저가 추가됩니다
그리고 이 확장 프로그램을 추가했으면
개발자 툴을 열어서
non-private 창에서 새로운 두개의 탭을 발견하게 될 것입니다
개발자 툴을 사용해 방문할 수 있는 새로운 두 페이지입니다
이 Profiler 페이지를 살펴보는 건
추후 강의에서 해보도록 하겠습니다
React Developer Tools의 이 기능은
주로 리액트 애플리케이션 내
성능 문제들을 찾고 고치는 것을 다루므로
이 탭을 살펴보는 것은
이후 강의에서 하겠습니다
정확히는 언제냐면
리액트 성능을 다루고 개선하는 시간에 살펴보겠습니다
지금은 이 components 탭이
더 흥미로워 보입니다
이 탭에는 애플리케이션의 컴포넌트 트리가 있습니다
App 컴포넌트인데 Header, UserInput
그리고 Results 컴포넌트들을 자식으로 갖고 있습니다
그리고 이 컴포넌트들에 마우스를 올려보면
왼쪽에 강조 표시가 보입니다
그래서 UI의 어떤 부분이 어떤 컴포넌트를 통해 통제되고
렌더링되고 있는지 빠르게 확인할 수 있습니다
이는 물론 더 복잡한 컴포넌트 트리와
복잡한 UI에서 분석하고 이해하는 데
유용합니다
여기 톱니바퀴 아이콘을 클릭하면
개발자 툴의 외관도
제어할 수 있습니다
예를 들어, 색상모드나 색의 농도를 바꿀 수 있고
이 컴포넌트 트리도
만약 컴포넌트 트리가 기본적으로 확장되어야 한다든지
그런 것들을 할 수 조정할 수 있습니다
간단하게 몇 가지 만져보면서
이것에 익숙해지시기 바랍니다
이제 이 컴포넌트들 중 하나를 클릭하면
그 컴포넌트에 대해서도 더 배울 수 있습니다
예를 들어 이 컴포넌트들이 받는 prop(속성) 에는 무엇이 있는지 보이고
prop 값이 어떤 타입인지도 확인해볼 수 있습니다
예를 들어, UserInput 컴포넌트가
onChange 속성을 받는데
받는 것은 함수이며 이 handleChange 함수입니다
한편으로 UserInput은
그 속성들을 가진 객체입니다
그 속성들을 수정해서
생긴 변화들을 UI에서 확인할 수 있습니다
만약 이 값들을 조금 만져보고
각 다른 값들이 어떤 결과들을 초래하는지
실험해보고 싶다면 말입니다
만약에 컴포넌트가 state(상태)를 관리한다면, 마치 app 컴포넌트처럼
그러면 그것들을 이 hooks 밑에서 볼 수 있습니다
여기서 볼 수 있는 건 이 앱의 app 컴포넌트가
state라는 훅을 사용하여
상태와 상태 값들을 생성한다는 것입니다
그 상태 값들을 여기서 수정할 수도 있습니다
예를 들어 이 duration을 12로 바꾸고
어떻게 UI에 반영되는지 보겠습니다
그래서 이 React Developer Tools에 있는components 탭은
아주 좋은 기능입니다
컴포넌트 트리가 어떻게 생겼는지
UI들의 어떤 부분들이 어떤 컴포넌트에 의해 관리되는지 이해하고
그리고 컴포넌트 트리를 수정하는 데 사용할 수도 있습니다
그리고 prop(속성)이나 state(상태)의 변화가
어떻게 UI에 반영되는지도 빠르게 감이 잡히실 것입니다