컴포넌트 기반 아키텍처

react
Apr 23, 2025
3 min

[본 게시물은 파트너스 활동의 일환으로 소정의 수수료를 받을 수 있습니다.]

ad-banner

[React 1부] 만들고 비교하며 학습하는 React

이제 리액트(React)를 제대로 배우세요. 순수 자바스크립트 방식과 비교하며, 리액트의 특징과 역할을 가장 쉽게 이해하는 강의!

컴포넌트 기반 아키텍처

컴포넌트 기반 아키텍처는 애플리케이션을 여러 개의 독립적인 컴포넌트로 나누어 개발하는 방식을 말합니다. 각 컴포넌트는 UI, 비즈니스 로직, 스타일을 포함하고 있으며, 다른 컴포넌트와 독립적으로 개발 및 테스트 할 수 있으며, 이를 통해 복잡한 애플리케이션을 작은 단위로 분리하여 관리할 수 있다는 장점이 있습니다.

주요 특징

  • 독립성 및 재사용성
    • 컴포넌트는 독립적인 단위로 설계되므로, 한 번 개발된 컴포넌트를 여러 곳에서 재사용 할 수 있습니다.
    • 이는 코드 중복을 줄이고 유지보수 효율성을 높입니다.
  • 분리된 관심사
    • 각 컴포넌트는 특정 기능이나 UI의 한 부분만 담당하므로, 서로 다른 역할이 명확하게 구분됩니다.
    • 예를 들어, 버튼 컴포넌트는 버튼 관련 기능만, 목록 컴포넌트는 목록 렌더링만 역할을 담당합니다.
  • 내부 상태 관리
    • 컴포넌트는 자체적인 상태(state)를 가질 수 있어, 해당 컴포넌트 내에서 데이터 변화에 따른 UI 업데이트를 효율적으로 처리할 수 있습니다.
  • 중첩과 조합 (Composition)
    • 작은 컴포넌트를 조합하여 더 큰 컴포넌트를 만들 수 있습니다.
    • 이를 통해 복잡한 UI도 계층적이고 직관적으로 설계할 수 있습니다.