리액트가 어떻게
컴포넌트 트리를 생성하고
어떻게 각 컴포넌트 함수들을 실행하는지 이해하는 것은
굉장히 중요합니다
물론 여러분이 직접 코드를 살펴보면서
어떤 형태를 띄는지, 그리고
각 컴포넌트들이 어떻게 연관되어 있는지 이해해 봐도 좋습니다
저처럼 여기에서 콘솔에 기록을 할 수도 있고
리액트 개발자 도구를 사용하셔도 됩니다
이러한 도구는 지난 과정인
디버깅 섹션에서 다뤘었습니다
리액트 개발자 도구는 간단하게 확장 기능이라고 보시면 됩니다
예를 들어 크롬에서도 설치할 수 있죠
설치를 하고 나면
개발자 도구를 열 수 있고
개인 정보 보호 탭이 아니라면
profiler 탭으로 갈 수 있습니다
이 profiler 탭은
어떤 컴포넌트들이 업데이트 중이고
렌더링 중인지를 이해하는데 사용됩니다
어떠한 상황에서도
이것으로 프로파일링을 시작할 수 있습니다
이 버튼을 클릭하기만 하면 됩니다
그 후에 페이지와 상호작용할 수 있습니다
예를 들어 카운터 값 올리기
그리고 나서 프로파일링을 멈춰 보면
결과를 그래픽 데이터로 볼 수 있습니다
어떤 컴포넌트 함수들이 어떠한 이유로 실행되었는지 보여줍니다
이 시각화 방식은 원하는 대로
바꿀 수 있습니다
그럼 이게 무슨 뜻인지 설명해 보도록 하겠습니다
여기 이 화염 (flame) 그래프 모드에서는
마지막에 결과를 보일 때
컴포넌트 함수들이 실행된
순서가 포함되어 있습니다
컴포넌트 함수들과의 관계도도 볼 수 있습니다
예를 들어, 여기 앱 컴포넌트가 보이는데
상위에 있는 이것이 루트(root) 컴포넌트입니다
이 컴포넌트가
Header와 Counter 컴포넌트를 자녀로 두고 있습니다
'App' 이나 'Header'에 마우스를 올려보면
왼쪽에 강조가 됩니다
하지만 이 둘도 렌더링되지 않았습니다
그래서 이 '증가하기(increment)' 버튼을 클릭해도
App 이나 Header 컴포넌트 함수들이
다시 실행되지 않습니다
당연한 결과입니다
왜냐하면 이 앱 코드를 보면
앱 컴포넌트가 어떠한 상태도 렌더링하지 않는다는 게 보입니다
카운터 값을 증가해서 변동이 생긴다 해도 말입니다
input을 통해 바뀌는 몇몇 상태들을 관리하기도 합니다
바로 이 입력값입니다
하지만 이 예시에서 바꾼 것은 그게 아니었습니다
대신 저는 이 밑에 있는 버튼을 눌러서
변동을 주었습니다
바로 Counter 컴포넌트입니다
왜냐하면 제가 이 안에서 '증가하기' 버튼을 눌러야
카운터의 상태를 바꾸기 떄문입니다
그러므로 Counter 컴포넌트가
재실행된 것입니다
과정 초반에 배웠듯이
컴포넌트 재평가가 일어나면 전파하지는 않습니다
그래서 리액트가 이 Counter 컴포넌트 함수를 재실행하는 것은
부모 컴포넌트인 앱 컴포넌트에 아무런 영향을 주지 않습니다
하지만 자녀 컴포넌트에는 영향을 줍니다
왜냐하면 제가 전에 설명했듯이
당연히 이 사용자 정의 함수들은
다시 실행되고
속성 값도 다시 받는 등의 과정을 거칩니다
그리고 이 화염 그래프를 보면
여기 보이듯이
4개의 컴포넌트들이 다시 실행됩니다
즉 여기 색칠된 컴포넌트들은
전부 다시 실행된 겁니다
지금 같은 경우는, 이 IconButton과,
그 버튼을 통해 보여지는 icon
이 IconButton과 CounterOutput 입니다
그리고 MinusIcon만
재실행된게 아니라 PlusIcon도 마찬가지입니다
여길 보시면
Ranked (순위) 차트 모드로 바꿔보면
다시 렌더링된 컴포넌트들만 볼 수 있고
최종적으로 재-랜더링 사이클에 필요한
컴포넌트들을 볼 수 있습니다
여기서는 Counter 컴포넌트입니다
상태가 바뀌었기 때문입니다
그 밑에는 중첩 컴포넌트들입니다
예를 들어 MinusIcon, CounterOutput, IconButton과
또 다른 Iconbutton과 PlusIcon입니다
여기서 확인할 수 있습니다
물론 개념은 같습니다
어떤 컴포넌트들이 재실행되었고 서로 어떻게 연관되었는지
볼 수 있습니다
설정 창에 들어가서
profiler에서
왜 각 컴포넌트가 렌더링되었는지를 기록할 수 있습니다
이걸 활성화하고 여기 결과 값도 지우고 나서
새로운 기록 세션을 시작하면
가끔 안 될 때도 있기 때문에 새로고침을 하겠습니다
그 다음 다시 증가하기를 누르고 멈춰줍니다
그러면 당연히 전과 같은 결과를
볼 수 있지만
이제 컴포넌트에 마우스를 올리면
그게 왜 바뀌었는지 볼 수 있습니다
그리고 클릭해보면
오른쪽에서 정보를 볼 수 있습니다
이게 다시 렌더링된 건 훅 1개가 바뀌어서라는 걸 볼 수 있죠
이런 경우, 간단하게
근본적 상태가 바뀌었다는 뜻입니다
이 개발자 도구는 좋은 도구가 될 수 있습니다
컴포넌트들이 어떻게 실행되는지도 이해할 수 있고
왜 실행되었는지도 알 수 있습니다
이 기초 개념을 이해하는 건 굉장히 중요합니다
왜냐하면 이게 여러분이 앱을
발전시키는 데 여러 방면에서 도움이 되기 때문입니다