Component Wrapping (컴포넌트 감싸기)

React에서 자식컴포넌트를 상위컴포너트를 감싸는방법

 

App.js

import Wrapper from './Wrapper';
 
function App(props) {
  return (
   // Wrapper라는 컴포넌트로 하위 컴포넌트를 감싸준다.
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true} />
      <Hello color="pink" />
    </Wrapper>
  );
}
 
export default App;

 

Wrapper.js

import React from 'react';
 
// 받을때 children 객체를 받는다.
function Wrapper({children}) {
   const style = {
      border: '2px solid black',
      padding: 16
   };
 
   // 해당 항목에 추가해준다.
   return <div style={style}>{children}</div>
}
 
export default Wrapper;