React - {children}

import React from 'react';


function Wrapper({children}){
    const style={
        border: '2px solid black',
        padding : 16
    };

    return <div style={style}>{children}</div>
}

export default Wrapper;

 

import React from 'react'
import Hello from './Hello'
import Wrapper from './Wrapper'

function App() {
  return (
    <Wrapper>
    <Hello name="react" color="red"/>
    <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

 

{children}이라는 prop은 태그와 태그 사이의 내용을 넣을때 주로 쓰임.

즉 자식 컴포넌트를 줄 때 사용하는 prop

---

벨로퍼트님의 리액트 강의를 듣고 정리하였습니다.