React의 Composition vs Inheritance 🌟

React의 Composition vs Inheritance 🌟

 

React 개발자 문서의 Composition vs Inheritance 섹션은 컴포넌트를 재사용하고 확장하는 방법에 대해 다룹니다. 이 문서에서는 **컴포지션(Composition)**이 **상속(Inheritance)**보다 React의 철학에 더 적합한 접근 방식이라는 점을 강조합니다. 이 글에서는 React 공식 문서를 기반으로 내용을 정리하면서 더 풍부한 사례와 설명을 추가해 보겠습니다. 😊

 

1️⃣ 컴포지션(Composition)이란?

 

컴포지션은 React에서 컴포넌트를 재사용하고 조합하는 가장 권장되는 방법입니다. 컴포넌트를 서로 조합하여 더 큰 컴포넌트를 구성하는 방식이죠.

 

🛠️ 컴포지션의 핵심 방식

 

React에서 컴포지션은 보통 props.children과 같은 특수 prop 또는 콜백 함수를 통해 구현됩니다.

 

예제 1: props.children 활용

 

function Card({ children }) {

  return <div className="card">{children}</div>;

}

 

function App() {

  return (

    <Card>

      <h1>React Composition</h1>

      <p>컴포지션은 상속보다 더 유연해요!</p>

    </Card>

  );

}

 

예제 2: 특정 영역에 삽입하기

 

function SplitPane({ left, right }) {

  return (

    <div className="split-pane">

      <div className="left-pane">{left}</div>

      <div className="right-pane">{right}</div>

    </div>

  );

}

 

function App() {

  return (

    <SplitPane

      left={<p>왼쪽 콘텐츠</p>}

      right={<p>오른쪽 콘텐츠</p>}

    />

  );

}

 

🌟 장점

1. 유연성: 각 컴포넌트는 자신의 역할만 담당하며, 외부에서 데이터를 주입받아 조립됩니다.

2. 재사용성: 작은 컴포넌트를 여러 곳에서 쉽게 재사용할 수 있습니다.

3. React의 철학에 부합: React는 UI를 조합 가능한 컴포넌트로 나누어 관리하는 것을 강조합니다.

 

2️⃣ 상속(Inheritance)이란?

 

상속은 클래스 기반 프로그래밍에서 부모-자식 관계를 정의하여 속성과 메서드를 공유하는 방식입니다. 하지만 React에서는 상속보다는 컴포지션을 사용하는 것이 권장됩니다.

 

🛠️ React에서 상속 사용 예제

 

class Button extends React.Component {

  render() {

    return <button>{this.props.label}</button>;

  }

}

 

class SubmitButton extends Button {

  render() {

    return <button>{this.props.label || "Submit"}</button>;

  }

}

 

🚫 React에서 상속을 지양하는 이유

1. 구조가 복잡해짐: 상속 계층이 깊어지면 컴포넌트 간의 관계를 이해하기 어려워집니다.

2. 유연성 부족: 상속은 컴포넌트의 역할을 고정시키는 경향이 있어 재사용성을 떨어뜨립니다.

3. React의 철학과 어긋남: React는 “합성”을 통한 조립형 설계를 권장합니다.

 

3️⃣ React에서 상속보다 컴포지션을 선호하는 이유

 

React는 UI를 구성 가능한 컴포넌트로 나누는 데 중점을 둡니다. 상속보다 컴포지션을 선호하는 이유는 다음과 같습니다:

 

✅ 컴포지션의 장점

• 구성 가능성: 여러 컴포넌트를 조합해 복잡한 UI를 쉽게 구성할 수 있습니다.

• 분리된 책임: 각 컴포넌트는 독립적으로 동작하며 자신의 역할만 수행합니다.

• 테스트 용이성: 작은 컴포넌트는 테스트하기 쉽습니다.

• 코드 간소화: 상속 계층을 피하면서 단순하고 직관적인 코드 구조를 유지할 수 있습니다.

 

4️⃣ 실전 활용: 컴포지션을 활용한 다양한 사례

 

🌟 컨트롤되는 컴포넌트와 슬롯 패턴

 

컴포지션은 자주 사용하는 컨트롤되는 컴포넌트나 슬롯 패턴에서도 매우 유용합니다.

 

컨트롤되는 컴포넌트

 

function Input({ label, value, onChange }) {

  return (

    <label>

      {label}

      <input value={value} onChange={onChange} />

    </label>

  );

}

 

function App() {

  const [name, setName] = React.useState("");

 

  return (

    <Input

      label="Name:"

      value={name}

      onChange={(e) => setName(e.target.value)}

    />

  );

}

 

슬롯 패턴

 

function Modal({ header, footer, children }) {

  return (

    <div className="modal">

      <div className="header">{header}</div>

      <div className="content">{children}</div>

      <div className="footer">{footer}</div>

    </div>

  );

}

 

function App() {

  return (

    <Modal

      header={<h2>모달 제목</h2>}

      footer={<button>닫기</button>}

    >

      <p>여기에 모달 내용이 들어갑니다!</p>

    </Modal>

  );

}

 

5️⃣ 컴포지션과 상속의 혼용은 가능할까?

 

React에서는 상속을 잘 사용하지 않지만, 특정 상황에서는 제한적으로 활용할 수 있습니다. 예를 들어, 공통적인 메서드가 필요할 때 상속을 사용할 수도 있지만, 대부분의 경우 HOC(Higher-Order Component) 또는 Hook으로 대체할 수 있습니다.

 

6️⃣ 컴포지션 vs 상속: 언제 어떤 것을 사용해야 할까?

• 컴포지션을 사용하는 경우:

• 컴포넌트 간의 관계가 느슨하고, 독립적으로 동작할 때.

• 재사용 가능한 UI 컴포넌트를 만들고 싶을 때.

• 상속을 사용하는 경우:

• 아주 드물게, 공통적인 로직이 강하게 결합되어 있어야 하는 상황에서만 사용.

 

결론: React 개발자의 선택은?

 

React에서는 컴포지션을 기본으로 삼고, UI를 조립 가능한 블록처럼 설계하는 것을 권장합니다. 상속은 특정 경우에만 제한적으로 사용하는 것이 좋아요.

 

🌷전설의 개발자가 되어봅시당!🌷