Component

페이지를 하나의 거대한 템플릿이나 함수로 만들면 작은 변경도 전체 문맥을 읽어야 하고, 비슷한 UI를 여러 곳에서 반복하게 됩니다. 기능이 늘수록 로직과 마크업이 한 덩어리로 커져서 어디를 고치면 어떤 화면이 영향을 받는지 추적하기 어려워집니다.

웹 애플리케이션이 문서 몇 장을 넘기는 수준에서 대시보드와 복잡한 상호작용 중심 구조로 바뀌면서, 화면을 더 작은 단위로 나눌 필요가 커졌습니다. React는 이 요구를 받아 컴포넌트 트리라는 모델을 중심에 두었고, 화면 전체를 독립된 조각의 조합으로 이해하게 만들었습니다.

컴포넌트는 보통 함수 형태로 정의되고, 실행될 때 현재 props와 state를 읽어 어떤 UI를 보여줄지 계산합니다. 부모 컴포넌트는 자식 컴포넌트를 JSX 안에서 배치해 더 큰 트리를 만들고, React는 이 트리를 따라 렌더링을 구성합니다. 결국 React 화면은 하나의 큰 HTML 파일이 아니라 컴포넌트 함수들이 연결된 트리로 이해하는 편이 정확합니다.

컴포넌트와 JSX는 함께 쓰이지만 역할이 다릅니다. JSX는 화면 구조를 적는 표현식이고, 컴포넌트는 그 표현식을 책임 단위로 감싼 설계 도구입니다. JSX만으로는 재사용 경계가 생기지 않고, 컴포넌트가 있어야 역할 분리와 조합이 가능해집니다.

실무에서는 한 컴포넌트가 한 문장으로 설명될 수 있을 때 경계가 가장 안정적입니다. 예를 들어 사용자 카드, 필터 바, 모달 헤더처럼 역할이 명확하면 테스트와 수정이 쉬워집니다. 반대로 여러 도메인 규칙을 한 컴포넌트에 몰아넣기 시작하면 props가 비대해지고 조건 분기가 급격히 늘어납니다.