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} 으로 대치되어 들어가게 된다.
'개발 > React' 카테고리의 다른 글
| [React] SPA란 무엇이며 언제 사용하는지... (1) | 2018.10.07 |
|---|---|
| [React] 리덕스(Redux)의 개념과 사용법에 대해 알아보자!! (0) | 2018.10.05 |
| [React] 함수형 컴포넌트 (Functional Component) 개념과 사용법... (0) | 2018.10.04 |
| [React] JSX란 무엇이며, 어떻게 사용하는가?? (1) | 2018.10.04 |
| [React] 리액트 참고 블로그 & 도움이 될 만한 블로그 정리 (0) | 2018.10.02 |
