react) props의 자식 컴포넌트에 node전달

props를 하위컴포넌트 태그 안쪽에 선언해 전달하는 것 외에도 하위 컴포넌트 태그 사이에 작성된 node를 전달할수있다.

 

**node는 html 구성하는 포괄적개념으로, 문서요소, 속성, 텍스트나 주석등이 있다. (html태그가 요소, 그 안에 속성들과 작성되는텍스트)

<PropsNode>
<span>node from App.js</span>
</PropsNode>

상위컴포넌트파일에서 하위 컴포넌트의 태그 사이에 <span>태그를 추가하면 props에 담아 하위 컴포넌트에 전달한다.

{this.props.children}

이렇게 상위 컴포넌트에서 전달한 노드는 this.props.children의 문법으로 접근해 사용할수있다.

import React from 'react';
import './App.css';
import PropsNode from './R023_PropsNode'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>Css적용하기</p>
      <PropsNode>
        <span>node from App.js</span>
      </PropsNode>
    </div>
  );
}

export default App;

 render(){
        return(
            <div style={{padding:"0px"}}>{this.props.children}</div>
        )
    }