22 게시글 페이지 구현하기 - 메인 페이지와 중복되는 부분 분리하기

source: categories/study/gatsby/gatsby_9-13.md

출처 / 인프런 개츠비 블로그

게시글 페이지 구현하기

메인 페이지와 중복되는 부분 분리하기

메인 페이지와 중복되는 부분은 어디일까

이제 본격적으로 게시글 페이지를 개발하기에 앞서, 메인 페이지와 중복되는 부분을 분리해주겠습니다.

저희는 이전에 아래와 같이 메인 페이지 컴포넌트를 작성했습니다.

src/pages/index.tsx

// ...

const IndexPage: FunctionComponent<IndexPageProps> = function ({
  location: { search },
  data: {
    allMarkdownRemark: { edges },
    file: {
      childImageSharp: { gatsbyImageData },
    },
  },
}) {
  // ...

  return (
    <Container>
      <GlobalStyle />
      <Introduction profileImage={gatsbyImageData} />
      <CategoryList
        selectedCategory={selectedCategory}
        categoryList={categoryList}
      />
      <PostList selectedCategory={selectedCategory} posts={edges} />
      <Footer />
    </Container>
  )
}

// ...
  

메인 페이지 컴포넌트 내에서 사용되는 컴포넌트들 중, 게시글 페이지 컴포넌트에도 동일하게 들어가는 것은 아래와 같습니다.

Container 컴포넌트
GlobalStyle 컴포넌트
Footer 컴포넌트

따라서 위의 세 컴포넌트를 Template 컴포넌트로 분리해주겠습니다.

이는 여러 페이지에ㅐ서 사용되는 컴포넌트이므로 src/components/Common 디렉토리에 저장해주겠습니다.

src/components/Common/Template.tsx

import React, { FunctionComponent, ReactNode } from 'react'
import styled from '@emotion/styled'
import GlobalStyle from 'components/Common/GlobalStyle'
import Footer from 'components/Common/Footer'

type TemplateProps = {
  children: ReactNode
}

const Container = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`

const Template: FunctionComponent<TemplateProps> = function ({ children }) {
  return (
    <Container>
      <GlobalStyle />
      {children}
      <Footer />
    </Container>
  )
}

export default Template
  

메인 페이지 컴포넌트에 변경 사항 반영하기

그럼 이제 메인 페이지 컴포넌트에서 Template 컴포넌트를 불러와 적용해주겠습니다.

아까 분리했던 컴포넌트를 모두 제거하고, Template 컴포넌트를 감싸주면 됩니다.

아래와 같이 코드를 수정해주세요.

src/pages/index.tsx

// ...

import Template from 'components/Common/Template'

// ...

const IndexPage: FunctionComponent<IndexPageProps> = function ({
   // ...
}) {
  // ...

  return (
    <Template>
      <Introduction profileImage={gatsbyImageData} />
      <CategoryList
        selectedCategory={selectedCategory}
        categoryList={categoryList}
      />
      <PostList selectedCategory={selectedCategory} posts={edges} />
    </Template>
  )
}

// ...
  

게시글 템플릿 컴포넌트에서 불러와 적용하기

그럼 메인 페이지 컴포넌트에 적용했던 것처럼 템플릿 컴포넌트에서도 불러와 그대로 적용해주겠습니다.

아래와 같이 코드를 변경해주세요.

src/template/post_template.tsx

// ...

import Template from 'components/Common/Template'

type PostTemplateProps = {}

const PostTemplate: FunctionComponent<PostTemplateProps> = function (props) {
  console.log(props)

  return <Template>Post Template</Template>
}

// ...