REACT_ 자식 Component에 node 전달하기

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

 

node : html 문서를 구성하는 포괄적인 개념. 노드의 종류에는 문서요소, 속성, 텍스트, 주석 등이 있다

예) <p id="a">bc</p>에서 <p> 태그가 요소, id가 속성, bc가 텍스트이다 

 

 

- R023_PropsNode.js

import { Component } from "react";

class R023_PropsNode extends Component {
    render() {
        return(
            <div style={{padding: "0px"}}>
                {this.props.children}
            </div>
        )
    }
}
export default R023_PropsNode;

 

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import PropsNode from './R023_PropsNode.js';

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

export default App;

 

결과