props.children 사용하여 Wrapper Component 분리하기

 

•  각 컴포넌트를 감싸는 div 태그에 공통적으로 적용되는 css를 가진 Card라는 래퍼컴포넌트를 만들어서
   div를 대체할 수 있다.

 

래퍼컴포넌트 적용 전

  return (
      <div className='expenses'>
        <ExpensesList items={filteredExpenses} />
      </div>
  );

 

 

 

Card.css

.card {
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

•  해당 css는  Card가 대체할 것 이므로 Card가 외부에서 받는 클래스로 적용되는 css를 수정한다.
  (expenses.css에서 위 스타일링을 제거)

 

Card.jsx

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

const Card = (props) => {
  const classes = 'card ' + props.className; //외부에서 받은 className추가
  return <div className={classes}> {props.children}</div>;
};

export default Card;

 

• props.children으로 <Card> 태그 안에 들어갈 것들을 받는다.
  Wrapper안에 들어간 컴포넌트는 props.children으로 사용가능하다.
• 그리고 Card 컴포넌트가 외부에서 받은 className(여기서는 expenses)을 props으로 받아서 
  Card 내부 div 태그의 className으로 넘긴다.
  
  

래퍼컴포넌트 적용 후 

  return (
      <Card className='expenses'>
        <ExpensesList items={filteredExpenses} />
      </Card>
  );

 

 

 

컴포넌트에서 다른 컴포넌트를 담기

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있습니다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다.

이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋습니다.

 

 

 

https://ko.reactjs.org/docs/composition-vs-inheritance.html

합성 (Composition) vs 상속 (Inheritance) – React