컴포넌트 분리 기준

1️⃣ UI 단위 기준으로 분리

화면에서 독립적인 UI 블록이면 컴포넌트로 분리하는 방식

 

예를 들어 쇼핑 페이지라면

ProductPage
 ├ ProductImage
 ├ ProductInfo
 ├ ReviewList
 └ RelatedProducts

 

이유

• 각 영역이 독립적으로 재사용 가능
• 코드 가독성 좋아짐

function ProductPage() {
  return (
    <>
      <ProductImage />
      <ProductInfo />
      <ReviewList />
    </>
  )
}

 

화면에서 박스 하나 단위면 보통 컴포넌트

 

 

2️⃣ 재사용 가능 여부

여러 곳에서 쓰이면 분리

 

예

Button
Modal
Card
Input

 

예 코드

<Button variant="primary">확인</Button>
<Button variant="secondary">취소</Button>

 

이런 컴포넌트는 보통 2번 이상 쓰이면 분리

components
 ├ Button
 ├ Modal
 └ Input

 

 

3️⃣ 로직 분리

UI는 같지만 데이터 처리 로직이 복잡하면 분리

보통 Custom Hook으로 분리

 

예

UserList.jsx
useUser.js

function UserList() {
  const { users, loading } = useUser()
}

 

👉 기준

• 상태 관리가 많다
• API 호출 있다
• 로직이 길다

→ hook으로 분리

 

4️⃣ 책임 단위 (Single Responsibility)

컴포넌트 하나는 하나의 역할만 하게

ProductPage
 ├ ProductInfo
 ├ ReviewList
 └ PaymentSection

 

👉 기준

• 컴포넌트 이름이 역할을 설명할 수 있어야 함

 

⭐ 실무에서 자주 쓰는 판단 기준 (중요)

1. 화면에서 영역이 나뉘는가?
2. 다른 곳에서도 쓸 수 있는가?
3. 코드가 100줄 넘는가?
4. 상태(state)가 복잡한가?

 

2개 이상 해당하면 분리하는 게 좋음

 

📏 경험상 좋은 컴포넌트 크기

보통

50 ~ 150 lines

 

넘으면 분리 고민