YLog

구름톤 유니브☁️ 4기 FE 스터디

서론

이번 포스팅에서는 리액트에서Composition과 Inheritance를 비교하여 알아보고자 합니다.

본론

1. Composition

📖 Composition란?

여러 개의 컴포넌트를 조합해 새로운 컴포넌트를 만드는 기법으로
리액트는 컴포넌트를 가볍고 독립적인 단위로 보고, 이들을 조합해 UI를 구성하도록 설계되어 있다.

✅ Composition 방법

📌 Containment

// children prop을 사용한 FancyBorder 컴포넌트
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

// WelcomeDialog 컴포넌트
function WelcomeDialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        어서오세요
      </h1>
      <p className="Dialog-message">
        우리 사이트에 방문하신 것을 환영합니다!
      </p>
    </FancyBorder>
  );
}

하위 컴포넌트를 children 프로퍼티로 포함하는 가장 기본적인 합성 방법이다.

FancyBorder안의 컴포넌트들이 children이라는 props로 전달되는 것이다.

// SplitPane 컴포넌트
function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

// App 컴포넌트에서 SplitPane 사용 예시
function App(props) {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      }
    />
  );
}

만약 여러 개의 children 집합이 필요한 경우라면, 위 코드 처럼 left와 right라는 두 개의 props를 정의하여

각각 분리해서 렌더링하게 된다.

📌 Specialization

// Dialog 컴포넌트
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

// Dialog를 특수화한 WelcomeDialog 컴포넌트
function WelcomeDialog(props) {
  return (
    <Dialog
      title="어서 오세요"
      message="우리 사이트에 방문하신 것을 환영합니다!"
    />
  );
}

범용 컴포넌트(개념)을 구별이 되도록 구체화하는 방법이다.

위 예시의 경우 WelcomeDialog(구체화된 개념)은 Dialog(범용적인 개념)의 특별한 케이스다.

기존 객체지향 개념에서는 상속을 사용하나 리액트에서는 Composition을 사용하여 Specialization을 한다.

✅ Containment와 Specialization 같이 사용하기

// 범용 Dialog 컴포넌트 (children을 사용하도록 확장)
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

// Dialog를 사용한 SignUpDialog 컴포넌트
function SignUpDialog(props) {
  const [nickname, setNickname] = useState('');

  const handleChange = (event) => {
    setNickname(event.target.value);
  };

  const handleSignUp = () => {
    alert(`어서 오세요, ${nickname}님!`);
  };

  return (
    <Dialog
      title="환성 탐사 프로그램"
      message="닉네임을 입력해 주세요."
    >
      <input
        value={nickname}
        onChange={handleChange}
      />
      <button onClick={handleSignUp}>
        가입하기
      </button>
    </Dialog>
  );
}

✅ Inheritance

📖 Inheritance(상속)이란?
상속, 다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것

복잡한 컴포넌트를 쪼개서 여러개의 컴포넌트로 만들고 만든 컴포넌트를 조합해서 새로운 컴포넌트를 만들자!

라는 개념을 이해하고만 가자

📌 Composition vs Inheritance

상속은 객체지향 프로그래밍에서 클래스 기반 상속을 통해 기능을 확장하는 방식인데,

이는 리액트에서는 권장되지 않는 방식이고 리액트에서는 합성 방식을 권장한다.

왜 그럴까?

✅ 리액트에서 상속을 잘 사용하지 않는 이유

• 복잡도 증가: 컴포넌트 간 의존성이 높아져 유지보수 어려움
• 재사용성 증가: 자식 클래스에 의존적인 API 설계 필요
• 컨텍스트 공유 어려움: props·state 조합이 복잡

class BaseButton extends React.Component {
  render() {
    return <button {...this.props} className="base-button" />;
  }
}

class IconButton extends BaseButton {
  render() {
    return (
      <BaseButton onClick={this.props.onClick}>
        <Icon name={this.props.icon} />
        {this.props.children}
      </BaseButton>
    );
  }
}

위 코드처럼 상속을 사용하면, IconButton이 BaseButton 구현에 종속적이어서 변화에 약하다는 문제점이 존재한다.

마무리

이번 글에서는 리액트에서 컴포넌트를 조합하는 기법인 Composition과 Inheritance에 대해 다뤄보았는데

전체적인 내용을 요약하자면

오늘도 읽어주셔서 감사합니다 🫡