common폴더와 elements폴더의 차이점,layout폴더

Commons 폴더

components/common/
  ├── Button/         // 기본 UI 컴포넌트
  ├── Input/
  ├── Select/
  ├── Avatar/
  ├── Modal/
  └── Pagination/

 

특징

 

1. 가장 기본이 되는 UI 컴포넌트들
2. 재사용성이 매우 높음
3. 비즈니스 로직이 없음
4. 특정 도메인에 종속되지 않음
5. 다른 컴포넌트의 구성 요소로 자주 사용됨

 

비즈니스 로직

애플리케이션의 주된 로직이나 규칙을 처리하지 않고 단순히 UI만 담당합니다. 이런 컴포넌트는 데이터나 특정 비즈니스 규칙에 의존하지 않기 때문에 여러 곳에서 쉽게 재사용할 수 있습니다.
예를 들어, 버튼, 카드, 입력 필드 등은 그 자체로는 비즈니스 로직을 포함하지 않지만 다른 컴포넌트나 페이지에 포함되어 사용될 수 있습니다.

반면, 예를 들어 “사용자가 로그인할 때 권한을 확인하고 로그인 여부를 처리하는 컴포넌트”는 비즈니스 로직을 포함합니다.

 

---

 

 

elements 폴더

components/elements/
  ├── ProductCard/    // 여러 common 컴포넌트 조합
  ├── LoginForm/     
  ├── UserMenu/      
  ├── CommentForm/   
  └── OrderSummary/

 

 

특징

1. common 컴포넌트들을 조합한 더 큰 단위의 컴포넌트
2. 특정 비즈니스 로직이 포함됨
3. 특정 도메인이나 기능에 종속됨
4. 재사용성이 common에 비해 제한적
5. 페이지나 섹션의 주요 구성 요소로 사용됨

 

 

---

 

 

예시로 보는 차이점

// common/Button/PrimaryButton.tsx
const PrimaryButton = ({ children, ...props }) => (
  <button className="bg-purple text-white" {...props}>
    {children}
  </button>
);

// elements/ProductCard/index.tsx
const ProductCard = ({ product }) => (
  <div>
    <Image src={product.image} />
    <h3>{product.title}</h3>
    <p>{product.price}</p>
    <PrimaryButton>장바구니 담기</PrimaryButton>  // common 컴포넌트 사용
  </div>
);

 

 

---

 

layout 폴더

components/
  ├── common/          # 기본 UI 컴포넌트
  │   ├── Button/
  │   └── Input/
  │
  ├── elements/        # 비즈니스 로직 포함된 컴포넌트
  │   ├── ProductCard/
  │   └── UserMenu/
  │
  └── layout/          # 레이아웃 구조 컴포넌트
      ├── Header/
      ├── Footer/
      ├── Sidebar/
      └── Navigation/

 

 

레이아웃 컴포넌트의 특징

1. 페이지의 구조를 형성
2. 여러 페이지에서 공통으로 사용
3. 웹사이트의 전체적인 레이아웃을 담당
4. 다른 컴포넌트들을 감싸는 컨테이너 역할