[React] 리액트에서 children 사용하기

const SubClass = ({ children }) => {

return (

<div className="todos-wrapper">

{children}

</div>

);

};

export default SubClass;

원래는 함수형 컴포넌트이므로, (props)를 받아야하지만,

이렇게 비구조화 할당함으로써 가독성을 높일 수 있다.

또한, children의 경우 나중에 해당 컴포넌트 SubClass를 사용하게 될 때,

SubClass를 부르는 태그 안에 내용이 

위 children에 삽인된다. 

그럼 예제를 보자.

import React, { Component } from 'react';

import SubClass from './components/SubClass';

class App extends Component {

render() {

return (

<div className="App">

<SubClass>

여기에 적은 Text가 children에 들어간다~ <br/>

    <strong>아하하하</strong>

</SubClass>

</div>

);

}

}

export default App;

이렇게 하면, App.js에서 선언한 SubClass 구현 부분 <SubClass>와 </SubClass>안에 내용이 

SubClass.js에서 {children} 으로 대치되어 들어가게 된다.