리엑트 children

공부중에 render props, children 관련해서 너무너무 햇갈려서 정리를 해보기로 했다.

 

먼저 예제 코드부터...

//App.jsx
import Mycomponent from "./components/Mycomponent";

function App() {
  return <Mycomponent name="민혁">하늘하늘뭉게뭉게</Mycomponent>;
}

export default App;

 

//Mycomponent.jsx
import React from "react";

function Mycomponent(props) {
  return <div>기본상태</div>;
}

export default Mycomponent;

 

간단한 코드이다. 결과 화면은 다음과 같다.

 

결과화면

그렇다면 App.js에서 Mycomponent 내부에

하늘하늘뭉게뭉게 글자들은 어디에 있는걸까?

콘솔을 찍어보자.

//Mycomponent.jsx
import React from "react";

function Mycomponent(props) {
  console.log(props.children);
  return <div>기본상태</div>;
}

export default Mycomponent;

하늘하늘뭉게뭉게가 출력되는 것을 볼 수 있다.

 

다시말해, 컴포넌트 내부에 요소는 해당 컴포턴트에서 props.children 으로 접근이 가능하다는 이야기다.