[React] children 컴포넌트에 props 전달하기

React 로 개발을 하다보면 Layout 을 만들고 <Layout><Item/></Layout> 이런식으로 써야하는 경우가 있습니다.

그렇게 되면 Layout 컴포넌트에서는 children  이라는 props 를 받게 되는데 이는 <Item/> 이 되죠.

이때에 <Item/> 에게 props를 넘겨주는 방법을 알아보겠습니다.

먼저

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

import ParentComp from './childProps/ParentComp';
import ChildComp from './childProps/ChildComp';

function App() {
  return (
    <div className="App">
      <ParentComp>
        <ChildComp />
      </ParentComp>
    </div>
  );
}

export default App;

 

ParentComp.jsx

import React from 'react';

const ParentComp = ({ children }) => {
    return (
        <div>
            {'Parent comp'}
            {
                React.cloneElement(children, {
                    props1: 'props1',
                    props2: 'props2',
                    props3: 'props3',
                })
            }
        </div>
    )
};

export default ParentComp;

 

ChildComp.jsx

import React from 'react';

const ChildComp = ({
    props1,
    props2,
    props3,
}) => {
    return (
        <div>
            {'Child component'}
            <div>
            {props1}
            </div>
            <div>
            {props2}
            </div>
            <div>
            {props3}
            </div>
        </div>
    )
};

export default ChildComp;

 

결과

위에 결과창 처럼 <ParentComp> 안에 있는 <ChildComp> 로 props 가 잘 전달 된것을 확인할 수 있죠.

React.cloneElemnt(children, {}) <-- 여기서 children이 ChildComp 가 됩니다.