React 컴포넌트 구조 및 설계

컴포넌트(Component)란?

컴포넌트(Component)는 영어로 구성 요소(Component) 또는 부품이라는 뜻이다.

현실 세계를 예로 들면 자동차는 엔진, 바퀴, 핸들처럼 여러 부품이 모여 하나의 자동차를 완성한다.

React도 이와 비슷하다.

하나의 화면(Page)을 여러 개의 작은 컴포넌트로 나누고, 이를 조립하여 하나의 화면을 구성한다.

예를 들어 쇼핑몰 메인 페이지는 다음과 같이 구성할 수 있다.

HomePage
 ├── Header
 ├── Banner
 ├── ProductList
 │    ├── ProductCard
 │    ├── ProductCard
 │    └── ProductCard
 └── Footer

이처럼 React에서 컴포넌트는 UI를 구성하는 독립적인 단위라고 이해하면 된다.

---

컴포넌트는 왜 탄생했을까?

웹 서비스가 커질수록 같은 UI를 여러 곳에서 반복해서 사용하게 된다.

예를 들어 다음과 같은 요소들은 거의 모든 서비스에서 반복적으로 등장한다.

• 버튼(Button)
• 입력창(Input)
• 카드(Card)
• 모달(Modal)
• 네비게이션(Navigation)

만약 페이지마다 이러한 UI를 새롭게 만든다면 어떨까?

• 로그인 페이지 버튼
• 회원가입 페이지 버튼
• 마이페이지 버튼
• 게시글 작성 버튼

처음에는 큰 문제가 없어 보일 수 있지만, 프로젝트가 커질수록 여러 문제가 발생한다.

• 동일한 코드가 반복된다.
• 디자인이 조금씩 달라질 수 있다.
• 수정해야 할 곳이 많아진다.
• 유지보수가 어려워진다.

예를 들어 버튼의 색상을 변경해야 한다면 버튼을 직접 만든 모든 페이지를 찾아 수정해야 한다.

이러한 문제를 해결하기 위해 React는 컴포넌트(Component)라는 개념을 도입했다.

한 번 만든 컴포넌트는 여러 곳에서 재사용할 수 있기 때문에 코드의 중복을 줄이고 유지보수를 쉽게 할 수 있다.

---

컴포넌트는 언제 분리해야 할까?

컴포넌트를 많이 만든다고 좋은 것은 아니다.

오히려 너무 작은 단위까지 분리하면 파일만 늘어나고 관리가 어려워질 수 있다.

보통 다음 기준을 만족한다면 컴포넌트로 분리하는 것이 좋다.

1. 재사용할 가능성이 있는가?

여러 화면에서 반복해서 사용할 UI라면 컴포넌트로 만드는 것이 좋다.

예를 들어

• Button
• Input
• Modal
• Card

등은 대표적인 재사용 컴포넌트이다.

2. 하나의 역할만 담당하는가?

좋은 컴포넌트는 하나의 책임만 가지는 것이 중요하다.

예를 들어 Button 컴포넌트라면 버튼을 보여주고 클릭 이벤트를 처리하는 역할만 담당하면 된다.

반대로 버튼 안에서 API 요청, 로그인 처리, 사용자 정보 조회까지 모두 수행한다면 하나의 컴포넌트가 너무 많은 책임을 가지게 된다.

3. 유지보수가 쉬워지는가?

컴포넌트로 분리했을 때 코드가 더 읽기 쉽고 관리하기 편해져야 한다.

반대로 재사용하지도 않고 너무 작은 단위로 분리하면 오히려 프로젝트 구조가 복잡해질 수 있다.

예전에 함께 일했던 대표님께서는 "같은 코드가 세 번 이상 반복되면 그때 컴포넌트로 분리해도 늦지 않다."라고 말씀하셨다.

물론 절대적인 기준은 아니지만, 불필요한 추상화를 줄이는 데 도움이 되는 좋은 기준이라고 생각한다.

---

컴포넌트 설계 예시

예를 들어 버튼 컴포넌트를 만든다고 가정해 보자.

먼저 버튼이 어떤 기능을 가져야 하는지 정의한다.

• 버튼에 표시할 텍스트
• 버튼의 종류(primary, danger 등)
• 클릭 이벤트

이를 Props로 정의하면 다음과 같다.

interface ButtonProps {
  label: string;
  variant?: "primary" | "danger";
  onClick: () => void;
}

---

스타일 추상화

버튼 종류에 따라 스타일도 미리 정의해 둘 수 있다.

const buttonStyle = {
  primary: {
    backgroundColor: "#2563eb",
    color: "#fff",
  },
  danger: {
    backgroundColor: "#dc2626",
    color: "#fff",
  },
};

이렇게 하면 버튼의 종류에 따라 다른 스타일을 쉽게 적용할 수 있다.

---

Button 컴포넌트 구현

export default function Button({
  label,
  variant = "primary",
  onClick,
}: ButtonProps) {
  return (
    <button
      style={{
        ...buttonStyle[variant],
        padding: "12px 16px",
        border: "none",
        borderRadius: "8px",
        cursor: "pointer",
      }}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

variant 값에 따라 스타일이 변경되고, label은 버튼의 텍스트가 되며, onClick은 버튼을 클릭했을 때 실행할 함수를 전달받는다.

---

컴포넌트 사용하기

이제 페이지에서는 버튼을 직접 구현할 필요가 없다.

필요한 속성(Props)만 전달하면 동일한 버튼을 여러 곳에서 재사용할 수 있다.

<Button
  label="로그인"
  onClick={handleLogin}
/>

<Button
  label="회원가입"
  variant="primary"
  onClick={handleSignup}
/>

<Button
  label="삭제"
  variant="danger"
  onClick={handleDelete}
/>

버튼의 디자인을 변경해야 한다면 Button 컴포넌트만 수정하면 된다.

이를 사용하는 모든 페이지에 변경 사항이 자동으로 반영되므로 유지보수가 훨씬 쉬워진다.

---

정리

• 컴포넌트는 UI를 구성하는 독립적인 단위이다.
• 하나의 화면은 여러 컴포넌트를 조합하여 구성한다.
• 같은 UI를 반복해서 사용한다면 컴포넌트로 분리하는 것이 좋다.
• 좋은 컴포넌트는 하나의 역할만 담당하고, 재사용성과 유지보수성을 높여준다.
• React는 컴포넌트를 조합하여 복잡한 화면도 효율적으로 개발할 수 있도록 도와준다.

참고

컴포넌트라는 개념 자체는 React가 처음 만든 것은 아니다. 오래전부터 GUI 프로그래밍에서는 버튼, 입력창처럼 재사용 가능한 UI 요소를 컴포넌트 형태로 사용해 왔다. React는 이러한 개념을 웹 개발에 적극적으로 도입하고, State와 Props를 결합한 선언형 UI 모델을 제시하면서 컴포넌트 기반 개발을 대중화했다.