3.3.4 컴포넌트 트리

리액트 애플리케이션은 App 컴포넌트에 여러 하위 컴포넌트를 포함하면서 전체 UI를 구성합니다. 즉, 하나의 컴포넌트 안에 또 다른 컴포넌트를 포함하는 방식으로 계층적 구조가 형성됩니다. 이렇게 컴포넌트들이 연결된 구조를 컴포넌트 트리(component tree)라고 합니다.

App 컴포넌트는 리액트 애플리케이션에서 가장 바깥쪽에 위치하는 컴포넌트입니다. 그래서 App을 루트 컴포넌트(root component)라고 합니다. 모든 컴포넌트는 이 루트 컴포넌트를 통해 트리 구조로 연결됩니다.

앞에서 작성한 컴포넌트 구조는 다음과 같습니다. App을 루트로 해 Header, Main, Footer가 자식 컴포넌트로 포함된 형태입니다.

그림 3-8 컴포넌트 트리

새로운 컴포넌트를 추가하면 트리 구조가 어떻게 바뀔까요? Header 컴포넌트 안에 Nav 컴포넌트를 추가해 트리 구조가 어떻게 바뀌는지 확인해 보겠습니다.