props, props.children, composition

Props

리액트에서 우리는 Props 를 통해 데이터를 주고 받을 수 있습니다.

...Welcome.js
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome

...App.js
import Welcome from './Welcome.js';

function App() {
	return <Welcome name='velog' />  
} 

부모인 App.js 에서 Welcome 의 함수에name 이라는 프로퍼티와 velog 라는 값을 설정해주었습니다.
자식인 Welcome.js 는 설정된 프로퍼티를 통해 데이터를 그대로 반영하여 결과를 산출합니다.
즉,props 는 properties 의 약자인 것입니다.

props.children

우리는 리액트 라이브러리를 통해 작은 구성요소로 컴포넌트를 분할하는 것이 가능하다는 것을 알았습니다. 그렇다면 생각을 해봅시다. 만약 사용자가 정의한 커스텀 컴포넌트를 부모로 둔 다른 커스텀 컴포넌트가 존재한다면 이거 정상 렌더링이 가능할까요???

이러한 상황일 때 props.children 을 사용하면 정상작동하게 됩니다.

// House.js
import React from 'react';

function House({ children }) {
  const style = {
    border: '4px solid green',
    padding: '16px',
  };
  return <div style={style}>{children}</div>;
}

export default House;

props.children 을 통해컴포넌트끼리 부모-형제 형태로 구현하는 것이 가능해지며 이로써 더욱 컴포넌트의 재사용성이 유연해질 수 있습니다.

Composition

component 안에 다른 component 를 담을 수 있을까요? 정답은 가능합니다.
언어를 떠나서 어떠한 코드든 작성할 때 마다 매번 효율성을 강조합니다.

프론트엔드를 공부해본 사람이라면 modal, card, carousel 등 다양한 태그들을 class 를 통해 재사용한 경험이 있으실 겁니다.
리액트 역시 원하는 컴포넌트에 다른 컴포넌트를 담아 사용하는 composition을 권장하고 있습니다.

//Card.js
import "./Card.css";

const Card = (props) => {
  const classes = "card " + props.className;
  return <div className={classes}>{props.children}</div>;
};

export default Card;

//App.js
function App() {
  return (
      <Card className="button1">
      	<button>hello-world</button>
      </Card>
      <Card className="button2"> 
      	<button>goodBye-world</button>
      </Card>
  )
} 

//result
//<div class="card button1">
//	<button>hello-world</button>  
//</div>
//<div class="card button2">
//	<button>hello-world</button>  
//</div>