내가 보려고 만든 개발 공부 일지

props.children 본문

React

props.children

kwangsunny 2021. 7. 2. 01:35

어떤 컴포넌트 사이에 다른 컴포넌트를 넣으면 컴포넌트의 props.children

사이에 들어간 컴포넌트들이 담겨져 온다.

ex)

<Wrapper> 
  <Hello color="red" text="TEST"></Hello>
  <Hello color="yellow" isSpecial={true}></Hello>
  <Hello></Hello>
</Wrapper>

function Wrapper({children}){ // 컴포넌트 사이에 들어온 다른 컴포넌트들은 props.children 에 할당됨
    var style = {
        border : "2px solid blue",
        padding : "20px"
    }

    return (
        <div style={style}>
            {children}
        </div>
    );
}

 

예제를 보면 Wrapper 사이에 Hello 컴포넌트들이 들어가있는데 Hello들은 Wrapper props.children 으로 가져올 있다.

'React' 카테고리의 다른 글

React - useReducer  (0) 2021.07.16
useState 기본 개념  (0) 2021.07.02
Hooks 사용 규칙  (0) 2021.07.02
React 컴포넌트 함수형 vs Class형  (0) 2021.07.02
Comments