폴더 구조

container-presentation

container-persentation은 데이터처리와 데이터출력을 분리하느 하나의 패턴이다.

한 파일안에 모든 것을 담아두게 된다면 로직과 api호출 ui등 가독성이 매우 떨어지게 된다. 현업에서는 개발은 팀 단위로 이루지게 된다. 그래서 개발을 할 때 가독성은 중요한 부분이다. 그래서 container-presentation 패턴은 개발을 하면서 코드관리에 도움이 되는 패턴이다.

container 부분에서는 api, 함수, hook등 로직을
presentation 부분에서는 ui부분을 담당하게 된다.

export default function BoardIdPresenter(props) {
   
    return(
        <div>
            <div>{props.data.fetchBoard.number}</div>
            <div>작성자:{props.data.fetchBoard.writer}</div>
            <div>제목: {props.data.fetchBoard.title}</div>
            <div>내용: {props.data.fetchBoard.contents} </div>
        </div>
    )

}

위 코드는 presentation부분으로 return밑에 ui부분을 관리해준다.

import {useQuery} from "@apollo/client"
import { useRouter } from "next/router"
import BoardIdPresenter from "./Board.id.presenter"
import { FETCH_BOARD } from "./Board.id.query"

export default function BoardIdContainer() {
   
    const router = useRouter()

    const {data} = useQuery(FETCH_BOARD,{
      variables:{number: Number(router.query.number)}
    })

    console.log(data)

    return(
      <BoardIdPresenter data={data}/>
    )

}

위 예시는 container부분으로 다양한 로직들 관리하여 주고 presentation 부분을 가지고 와서 하나의 컴포넌트로 넣어준다.

import BoardWriteContainer from "../src/component/units/write/BoardWrite.container";

export default function CraphqlMutationPage() {
   
    return (
      <BoardWriteContainer />
    )
}

마지막으로 conatainer와 presentation을 합쳐준 부분을 index.js 파일에 import를 해서 하나의 컴포넌트로 상용을 해주면 container-presentation 패턴으로 잘 활용할 수 있다.