[리액트 React] props node / props의 자식 컴포넌트에 node 전달 / 컴포넌트 node 전달하기

node

• html 문서를 구성하는 포괄적인 개념.
• 태그 요소, 속성, 텍스트, 주석 등.

예) <p id="a">apple</p>

<p> : 태그 요소
id : 속성
apple : 텍스트

 

 

 

App.js 작성하기

props를 하위 컴포넌트 태그 안쪽에 선언하는 방법 말고도, 하위 컴포넌트 태그 사이에 작성된 node를 전달할 수 있다.

import React from 'react';
import './App.css'
import UsePropsNode from './UsePropsNode';

function App() {
	return(
		<div>
			<UsePropsNode>
				<p>node from App.js</p>
			</UsePropsNode>
		</div>
	)
}

export default App;

 

 

 

 

2-1. 클래스형 컴포넌트 UsePropsNode.js 작성하기

import React, { Component } from 'react';

class UsePropsNode extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}

export default UsePropsNode;

 

 

 

 

 

2-2. 함수형 컴포넌트 UsePropsNode.js 작성하기

import React from 'react';

function UsePropsNode(props) {
    return (
        <div>
            {props.children}
        </div>
    )
}

export default UsePropsNode;

 

 

 

 

3. 브라우저 결과 확인

App.js에서 전달받은 <p>태그를 확인할 수 있다.