[ 36 ] 컴포넌트 합성

_app.tsx의 세팅 컴포넌트

아래의 코드를 확인해보면 ApolloPrivder 설정 컴포넌트로 다른 컴포넌트들을 감싸서 이용하고 있는것이 보인다. 쉬운 예제코드에서는 세팅 컴포넌트들이 많지 않아 문제가 되지 않지만, 세팅해줘야할 컴포넌트들이 많아진다면 _app.tsx 의 코드가 복잡해지고 유지보수가 어렵게 된다.

따라서 각각의 세팅 컴포넌트들을 따로 파일에 분리해 작성하고 컴포넌트 합성을 해서 _app.tsx에 적용한다.

// import "../styles/globals.css";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import type { AppProps } from "next/app";
import "antd/dist/antd.css";
import Layout from "../src/commons/layout";
 
export default function App({ Component, pageProps }: AppProps): JSX.Element {
  const client = new ApolloClient({
    uri: "http://backend-example.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache(), // 컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기 => 나중에 자세히 알아보기
  });
 
  return (
    <ApolloProvider client={client}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ApolloProvider>
  );
}

컴포넌트 합성 리팩토링 적용 후 

_app.tsx 

// import "../styles/globals.css";
import type { AppProps } from "next/app";
import "antd/dist/antd.css";
import Layout from "../src/commons/layout";
import ApolloSetting from "../src/components/commons/apollo";

export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <ApolloSetting>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ApolloSetting>
  );
}

Apollo Setting Component

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

interface IApolloSettingProps {
  children: JSX.Element;
}

export default function ApolloSetting(props: IApolloSettingProps): JSX.Element {
  const client = new ApolloClient({
    uri: "http://backend-example.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache(), // 컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기 => 나중에 자세히 알아보기
  });

  return <ApolloProvider client={client}>{props.children}</ApolloProvider>;
}