[react 리액트] Wrapper 컴포넌트만들기 (ft. props.children)

1. wrapper 컴포넌트는 왜 필요한가?

다수의 컴포넌트에서 공통적으로 적용되는 CSS 코드가 있는 경우, 코드 중복을 줄이고 관리의 편의를 위해

*CSS는 예시일 뿐, 다양한 상황에서 필요할 수도...

*<div className="wrapper"></div> 이렇게 수십, 수백군데에 감싸놓고 css파일또한 컴포넌트별로 생성해뒀다면
변경사항이 생겼을때 수십, 수백군데 다 고쳐줘야 한다.

 

 

 

2. 작성법

 

1) 컴포넌트의 컨텐츠를 감쌀 wrapper 가 될 Card 컴포넌트를 만들어보자.

 

Card.js (wrapper 컴포넌트)

import './Card.css'

export default function Card(){

    return <div className="card"></div>

}

 

 

Card.css

중복되는 css 코드를 작성한다.

.card{

    border-radius: 12px;

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

}

 

 

 

2) 필요한 컴포넌트에서 wrapper 역할을 하던 <div> 를 <Card>로 교체한다

ExpenseItem.js (감싸질 컴포넌트)

import ExpenseDate from "./ExpenseDate";

import Card from "./Card";

import "./ExpenseItem.css";

export default function ExpenseItem(props) {

  return (

    <Card className="expense-item"> // 바로 이 부분

      <ExpenseDate title={props.title} amount={props.amount} date={props.date}/>

      <div className="expense-item__description">

        <h2 className="expense-item h2">{props.title}</h2>

        <div className="expense-item__price">{`$${props.amount}`}</div>

      </div>

    </Card>

  );

}

 

 

근데 이러면 화면에 아무것도 나타나지 않는다.

사용자 지정 컴포넌트는 기본적으로 모든 컨텐츠를 감싸는 wrapper로 사용할 수 없다.

 

 

 

 

 

3) props.children 으로 wrapper 컴포넌트에서 감쌀 컴포넌트를 인자로 받아 컨텐츠를 뿌려줄 수 있다.

 

Card.js (wrapper 컴포넌트)

import './Card.css'

export default function Card(props){

    return <div className={classes}>{props.children}</div>

}

 

 

근데 이러면 wrapper에 감싸진 css는 다 무시되어 버림.

 

 

 

 

 

4) 변수를 하나 만들어 감싸지는 컨텐츠의 className들까지 모아주자. 

 

Card.js (wrapper 컴포넌트)

import './Card.css'

export default function Card(props){

    const classes = 'card ' + props.className ;

    return <div className={classes}>{props.children}</div>

}

- classes 변수를 하나 만들어 Card의 css 클래스네임인 card와 props의 클래스네임을 합쳐준다.

 

 

 

클래스 이름마다 띄어쓰기가 하나씩 필요하다는 것을 잊지말자!

'card(띄어쓰기)' + props.className 또는 벡틱으로 `card(띄어쓰기)${props.className}` 이렇게 작성해야한다.

 

잘 나오는 구만