리액트에서는 컴포넌트가 어디에서 렌더링되는지에 따라 컴포넌트 트리에서의 위치가 결정됩니다. 즉, 컴포넌트 간 포함 관계에 따라 트리가 구성되며, 이 구조는 애플리케이션의 동작 방식과 데이터 흐름에 중요한 영향을 줍니다.
리액트 컴포넌트의 주요 특징은 정리하면 다음과 같습니다.
• 계층 구조: 컴포넌트는 부모-자식 관계의 계층 구조를 가집니다. 부모 컴포넌트는 여러 자식 컴포넌트를 포함할 수 있으며, 자식 컴포넌트는 특정 부모 안에서만 렌더링됩니다. HTML에서는 형제 태그가 존재하지만, 리액트의 컴포넌트에는 형제 관계라는 개념은 명시적으로 존재하지 않습니다.
• 단방향 데이터 흐름: 리액트에서는 데이터가 항상 부모에서 자식으로만 흐릅니다. 부모 컴포넌트는 props를 통해 자식에게 데이터를 전달할 수 있지만, 자식 컴포넌트는 부모의 데이터를 직접 변경할 수 없습니다.
TIP props(properties의 줄임말)는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. 함수의 매개변수처럼 자식 컴포넌트는 전달받은 props를 사용해 화면에 표시할 내용을 바꾸거나 동작을 제어할 수 있습니다. props에 관해서는 3.4절에서 살펴봅니다.
• 재사용성: 한 번 정의한 컴포넌트는 여러 위치에서 반복해서 사용할 수 있습니다. 이를 통해 코드의 중복을 줄이고, 유지보수를 쉽게 할 수 있습니다.