폴더구조를 실무적으로! Container-Presenter구조

React에서하나의 페이지를 만들때 하나의 js에 다 넣다보니 양이 많아지면 가독성이 떨어지고 오류찾기도 힘들다. 다른 사람이 내 코드를 볼 땐 더더욱 보기 힘들고 가독성도 훨씬 덜어지게 된다. 가독성을 위해 각 기능들마다 파일을 나눠 저장을 하는데 그게 Container-Presenter구조이다.
게시판 등록하는 페이지를 만들었는데 한번 보자.

import { gql, useMutation } from "@apollo/client";
import { useState } from "react";
import { useRouter } from "next/router";

const CREATE_PRODUCT = gql`
  mutation createProduct(
    $seller: String
    $createProductInput: CreateProductInput!
  ) {
    createProduct(seller: $seller, createProductInput: $createProductInput) {
      _id
      number
      message
    }
  }
`;

export default function createProduct() {
  const [createProduct] = useMutation(CREATE_PRODUCT);
  const [seller, setSeller] = useState("");
  const [name, setName] = useState("");
  const [detail, setDetail] = useState("");
  const [price, setPrice] = useState("");
  const router = useRouter();

  const onChangeSeller = (event) => {
    setSeller(event.target.value);
  };

  const onChangeName = (event) => {
    setName(event.target.value);
  };

  const onChangeDetail = (event) => {
    setDetail(event.target.value);
  };
  const onChangePrice = (event) => {
    setPrice(event.target.value);
  };
  const onClickSubmit = async () => {
    try {
      const result = await createProduct({
        variables: {
          seller: seller,
          createProductInput: {
            name: name,
            detail: detail,
            price: Number(price),
          },
        },
      });
      console.log(result);
      alert("게시판이 등록됐습니다.");

      router.push(`/05/query/${result.data.createProduct._id}`);
    } catch (error) {
      console.log(error.message);
    }
  };
  return (
    <div>
      판매자: <input type="text" onChange={onChangeSeller}></input>
      상품명: <input type="text" onChange={onChangeName}></input>
      상품내용: <input type="text" onChange={onChangeDetail}></input>
      상품가격: <input type="text" onChange={onChangePrice}></input>
      <button onClick={onClickSubmit}>상품 등록</button>
    </div>
  );
}

html과 js부분 또 api를 연결하는 부분까지 같이 있다보니 가독성이 떨어진다.
Container-Presenter구조로 바꿔보자.

하나였던 js파일을 src파일을 만들어 > components > units > product > seller
에 파일을 각각의 기능만큼 넣어줘서

먼저 Container은 js부분을 넣는다.

중요한 부분은 return부분에 presenter안에 변수를 집어 넣어주고 그 태그 안에 js에 있는 변수를 변수로 다시 지정해서 사진처럼 넣어주고, presenter에서 그 변수를 불러 오는 방식은 매개변수props를 쓰면 된다.

props에 들어 오는 값들 .변수를 입력해주면 데이터를 받아올 수 있다.

gql부분도 따로 넣어준다.

styles부분은 css를 넣어주는 파일로 만들 수 있다.

데이터를 주고 받고하는 큰 틀을 정리하자면 gql, css, presenter파일이 container로 모이게 되고 정보를 받은 container파일은 pages폴더에 있는 파일에 정보를 보낸다.

마지막으로 모든 정보들은 app.js에 있는 component로 들어가서 app.js에서 전체적인 정보들이 화면상에 나타나게 된다.

이렇게 파일을 나눠두면 원하는 정보를 직관적으로 폴더를 찾아 사용할 수 있고 다른 사람들이 코드를 볼 때도 기능별로 나눠져 있기 때문에 가독성이 엄청 높아진다.