[Next.js] app과 containers 로 폴더구조짜기

🌳 app 폴더 : 오직 라우팅용으로만 사용
🌳 containers : 실질적인 내용 구성

app 폴더는 최대한 깔끔함이 요구되는 곳이기 때문에 page.tsx 파일을 넣으면 Next가 '아 이거 라우트 정의 파일에 해당하는군!' 하고 그에 맞는 작업들을 해준다.
app> page.tsx 안에서 보여줄 컨텐츠들은 containers 폴더에 넣어두고 import해와서 사용하자!

☘️ 1. src> containers> company

"use client"; //이벤트핸들러 동작을 위해 사용

import CustomButton from "@/components/CustomButton/CustomButton";

export default function CompanyPageContent() {
  function handleClick() {
    console.log("스크롤이 동작합니다.");
  }

  return (
    <div className="main">
      <h1>회사입니다</h1>
      <div className="food">
        <h4>상품명 $40</h4>
      </div>
      <CustomButton
        title="GoodBye2024"
        handleClick={handleClick}
        isDisabled={false}
        className="listBtn"
      />
    </div>
  );
}

containers 폴더 내부에 작업할 페이지들의 컴포넌트들을 둔다.

☘️ 2. src> app> company

import CompanyPageContent from "@/containers/company/page";

const CompanyPage = () => {
  return <CompanyPageContent />;
};

export default CompanyPage;

그리고 import해와서 사용하는 방식 !!

const IdolsPage = async () => {
  const years = await getIdolYearsDataApi()
    .then((res) => res.data)
    .catch(() => []);

  return <Idols years={years} />;
};

다른 예시코드이지만, async을 이용한 데이터 호출도 가능하다.
받아온 값을 해당 컴포넌트에 넘겨주는 방식 !!

☘️ 3. src> app

즉, app 폴더 내에서 폴더생성이 곧 경로지정을 의미하고, 각 경로에 따라 폴더 생성하여 위와같이
page.tsx를 생성해 container에 있는 파일을 import해오면 된다.
app 폴더는 라우팅 처리만 담당하고, 모든 UI와 비즈니스 로직은 containers에서 관리하는 형태 !!