재사용 가능한 wrapper 컴포넌트

children prop

일반적인 방법으로 사용자 지정 컴포넌트는 컨텐츠를 감싸는 wrapper로 사용할 수 없습니다.
하지만 wrapper로 사용할 컴포넌트에서 props.children 을 사용하면 가능합니다.
children 은 예약어이며 따로 지정해주지 않아도 넘어가게 되어 있습니다.

예시

Card.js 로 props 를 통해 <div>Hello World</div> 라는 children 을 보낸 것과 같습니다.

//  ExpenseItem.js

import Card from './Card';

function ExpenseItem() {
	return(
      <Card>
        <div>Hello World</div> // children
      </Card>
	)
}

export default ExpenseItem;

wrapper로 감싸진 컨텐츠는 props.children으로 가져올 수 있습니다.
props.children 는 Card 의 children 인 <div>Hello World</div> 를 받습니다.

// Card.js

function Card(props) {
	return (
      <div>
        {props.children} // <div>Hello World</div> 와 같음
      </div>
    )
}

export default Card;

children prop 재사용 컴포넌트 CSS 속성 예시

'ExpenseItem.js' 의 wrapper Card 컴포넌트에 expense-item class를 지정하여 '/ExpenseItem.css'에서 지정한 css 속성을 적용 받으려고 합니다.

Card.js 의 Card 함수에서 return 하는 <div> 에 card class를 지정하여 './Card.css'에서 지정한 css 속성도 적용 받으려고 합니다.

이렇게 코드를 작성하면 '/ExpenseItem.css'에서 지정한 css 속성과 './Card.css'에서 지정한 css 속성을 모두 받을 것 같습니다.

// ExpenseItem.js

import Card from './Card';
import '/ExpenseItem.css';

function ExpenseItem() {
	return(
      	// css 속성을 지정
		<Card className='expense-item'>
			<div>Hello World</div>
		</Card>
	)
}

export default ExpenseItem;

// Card.js

import './Card.css'; 

function Card(props) {
	return <div className='card'>{props.children}</div>
}

export default Card;

하지만 'ExpenseItem.js' 의 wrapper Card 컴포넌트에 적용한 css '/ExpenseItem.css' 속성이 적용되지 않습니다.

DOM의 class도 expense-item이 빠진 card로만 되어 있습니다.

다중 CSS 클래스 사용으로 해결

Card.js 쪽에서 변수를 만들고 Card.js 에서 적용시켜야할 css 속성과 ExpenseItem.js 에서 적용시켜야할 css 속성을 더하여 다중 CSS 클래스로 초기화하여 해결하겠습니다.
다중 CSS 클래스는 Card.js 의 className 에 초기화한 변수를 사용합니다.

// Card.js

import './Card.css'; // Card.js 에서는 'card' 속성 적용하여 Card.css의 스타일 적용

function Card(props) {
  	// 'card ' 에서 card 다음 띄어쓰기 빼먹지 않기('card'아님)
	const classes = 'card ' + props.className;

	// ExpenseItem.js에서는 Card 컴포넌트의 className 인 'expense-item' 속성 적용
	return (
      <div className={classes}>
        {props.children}
      </div>
    )
}

export default Card;

// ExpenseItem.js

import Card from './Card';
import '/ExpenseItem.css';

function ExpenseItem() {
	return(
      	// 'card expense-item'이 되어 ExpenseItem.css의 스타일 적용
		<Card className='expense-item'>
			<div>Hello World</div>
		</Card>
	)
}

export default ExpenseItem;

위의 'ExpenseItem.js' 코드는 아래와 같습니다.

// ExpenseItem.js

import Card from './Card';
import '/ExpenseItem.css';

function ExpenseItem() {
	return(
		<div className='card expense-item'>
			<div>Hello World</div>
		</div>
	)
}

export default ExpenseItem;

다중 CSS 클래스는 클래스 선택자 두개를 사용하는 선택자입니다.