[gatsby.js] Layout 컴포넌트에서 자식 컴포넌트로 props 전달하기

💻 gastby.js에서 모든 자식 컴포넌트에 props를 전달하기

보통 gatsby에서 layout 컴포넌트가 모든 page에 사용되기 때문에 layout 컴포넌트를 최상위 컴포넌트로 사용한다.

만약 Intro page의 코드가 아래와 같을때, 전 페이지에서 공통으로 사용되는 state를 Intro Page로 전달하려면 어떻게 해야할까?

//Intro.js

import React from 'react';
import Layout from '../components/layout/layout';
import introPage from '../components/introPage/introPage';

const Intro = () => {
  return (
    <Layout>
      <introPage />
    <Layout />
  );
};

export default Intro;

열심히 구글링을 해본 결과 가장 간단한 방법은 아래와 같다
Layout.js 파일에 아래 코드를 입력한다.

//laydout.js
const childrenWithProps = React.Children.map( children, ( child ) => 
  React.cloneElement( child, {
    // children에 props로 전달하고자 하는 내용 입력
  }),
)

그런 뒤 return 메소드 안에서 { children } 대신에 { childrenWithProps } 로 바꿔주면
layout 컴포넌트 하위의 모든 컴포넌트에서 props를 전달 받을 수 있게된다.

❗️ 경험상 이 방법이 localhost 환경에서는 잘 작동하나 build 과정에서 error가 발생하므로 사용에 유의해야할 것 같다... ☹️