3.4 React 기초 및 실습: composition(합성) (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

css는 깃허브 참고 https://github.com/katf101/React-The_Complete_Guide

---

1. composition(합성) 이란?

작은 빌딩 블럭으로부터 사용자 인터페이스를 구축하는 이런 접근 방법을 일반적으로 합성이라 한다.

composition 을 하는 이유

• 코드 중복을 피할 수 있다.
• 컴포넌트를 깔끔하게 유지할 수 있다.

composition 에 사용되는 props.children

• props.children은 예약어이다.
• 사용자 지정 컴포넌트에 있는 열고 닫는 태그 사이에 있는 컨텐츠이다.

---

2. props.children 사용하여 composition 하기

composition 에 사용될 중복되는 css 코드 ( ExpenseItem, Expenses)

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

 

Card.js 컴포넌트를 만든다.

props를 받으며 상수를 하나 생성하여 className으로 사용할 "card"와 props의 className을 상수에 할당한다.

이후 상수를 return 되는 div태그의 className의 값으로 할당해주고 props.children을 div의 값으로 주면 된다.

import "./Card.css";

const Card = (props) => {
  const classes = "card " + props.className; // "card " : card다음 공백을 무조건 넣어주어야 함
  return <div className={classes}>{props.children}</div>;
};

export default Card;

# Card.js

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

# Card.css

 

ExpenseItem, Expenses에 합성하기

  return (
    <Card className="expense-item"> // div 를 Card로 합성
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </Card> // div 를 Card로 합성
  );
  
  # ExpenseItem.js

return (
    <Card className="expenses"> // div를 Card로 합성
      <ExpenseItem
        title={props.items[0].title}
        amount={props.items[0].amount}
        date={props.items[0].date}
      />
      
 # Expenses.js