Why

컴포넌트들의 wrapper가 동일한 스타일을 공유하는 경우가 있다. 이런 스타일을 컴포넌트로 만들어서 재사용 해보자.

How to

1. 공유하는 스타일 작성 (card 클래스)

card.css

.card {
  border-radius: 16px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.01);
}

2. card 클래스의 컴포넌트 만들기

Card.js

function Card({ className, children }) {
  // 클래스가 card 면서 props의 className
  const classes = 'card ' + className;
  return (
    <div className={classes}>
      {children}
    </div>
  );
}

export default Card;

3. props로 다른 클래스 (my-class, new-class) 넘기기

MyComponent.js

function MyComponent() {
  return (
    <Card className='my-class'>
      <h2>제목</h2>
      <p>내용</p>
    </Card>
  );
}

export default MyComponent;

NewComponent.js

function NewComponent() {
  return (
    <Card className='new-class'>
      <div>새로운 컴포넌트</div>
      <div>새로운 컴포넌트</div>
      <div>새로운 컴포넌트</div>
    </Card>
  );
}

export default NewComponent;

이 방식으로 Wrapper(Card) 컴포넌트를 만들면 코드의 재사용성을 높일 수 있다. 다른 컴포넌트여도 클래스 card의 동일한 스타일을 공유할 수 있으며, 각 컴포넌트는 자신만의 클래스 my-class와 new-class를 적용하여 스타일을 변형할 수도 있다.