[리액트(React)] Composition

// Composition

- 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것(합성)

• Containment : 하위 컴포넌트를 포함하는 방법
• Specialization : 범용적인 개념을 구체화하는 방법

- 다른 컴포넌트가 아닌 내용을 감싸서 구축할 수도 있다.(https://sorrel012.tistory.com/360의 props.children 참고)

[리액트(React)] Component, Props

---

상위 컴포넌트(A)에서 하위 컴포넌트(B) 안에 하위 컴포넌트(C)를 사용할 때, props drilling이 발생할 우려가 있다.

이를 해결하기 위해 children을 활용하여 A 컴포넌트로 C 컴포넌트를 감싸서 B 컴포넌트에 전달한다.

그러면 B 컴포넌트에서는 children 으로 C 컴포넌트를 받아 처리할 수 있다.

// props drilling
props를 하위 컴포넌트에 전달하기 위해 해당 props를 사용하지 않는 여러 증긴 컴포넌트를 거쳐서 전달하는 것

---

//컴포넌트

function Card(props) {
  const { title, backgroundColor, children } = props;

  return (
    <div
      style={{
        margin: 8,
        padding: 8,
        borderRadius: 8,
        boxShadow: '0px 0px 4px grey',
        backgroundColor: backgroundColor || 'white',
      }}
    >
      {title && <h1>{title}</h1>}
      {children}
    </div>
  );
}

export default Card;

 

import React from 'react';
import Card from './Card';

function ProfileCard(props) {
  return (
    <Card title='hana' backgroundColor={'#4ea04e'}>
      <p>안녕하세요, 하나입니다.</p>
      <p>리액트 공부 중</p>
    </Card>
  );
}

export default ProfileCard;