container / presenter 패턴

리액트의 유명한 디자인 패턴에는 크게 3가지 존재한다

• container / presentational 패턴
• hooks 패턴
• atomic 패턴

이중 container / presenter 패턴에 대해 알아보자

---

container / presenter 패턴 및 사용방법

코드를 자바스크립트(container)와, JSX 즉 UI영역(presenter) 부분으로 파일을 나누어 관리하는 방법이다

export default function MyPage() {

  const name = "Choi"

  return(

    <>
      <div>얀녕! {name}만나서 반가워</div>
      <div>여기는 나의 페이지야!</div>
    </>
    
  )
}

이러한 페이지가 있다고 하자 이걸 container / presentation패턴을 사용하여 나눈다면

container 즉 자바스크립트 파일

import Presenter from "../presenter"

export default function Container() {
  const name = "Choi"

  return(
    <Presenter firstName={name}/>
  )
}

presenter JSX영역

export default function Presenter(props) {

  return(

    <>
      <div>얀녕! {props.firstName}만나서 반가워</div>
      <div>여기는 나의 페이지야!</div>
    </>
  )
}

위와 같이 자바스크립트와 JSX를 나누고 container에서 Presenter를 불러와서 조립하고 최종적으로 이걸 불러오는 곳에서 페이지가 완성 되는것을 알 수 있다

여기서 자바스크립트를 JSX로 전달시에는 props를 사용하여 전달해서 사용한다
리액트는 단방향 구조이므로 전달시에는
import하여 불러오는 부모컴포넌트 에서
import가 되어 불려가는 자식컴포넌트로만 가능하다

---

왜 이러한 방식을 쓰는거지?

왜 굳이 파일을 나눠서 사용 하는걸까?

container / presenter 패턴의 장점으로

• 자바스크립트와 JSX부분이 서로 분리가 되어있어 유지보수하기가 좋다
• 동일한 디자인(배너, NAV바 등)을 import해서 사용하면 되기 때문에 재사용성이 우수하다

---

참고글
https://kyounghwan01.github.io/blog/React/container-presenter-dessign-pattern/#presentational-container-디자인-패턴이란
https://www.patterns.dev/posts/presentational-container-pattern/