React 컴포넌트 3단 구조 Best Practice

// PlannedAccommodationController.tsx
 
// 이 컴포넌트가 하는 일: store에서 데이터를 꺼내 List에 전달하는 것뿐
 
const PlannedAccommodationController = () => {
  // [입력] store에서 외부 데이터 읽기
  const { startDate, plannedAccommodations } = usePlanStore();
 
  // [처리] 하위가 필요한 데이터만 추려서 props로 내려줌
  // UI 가공, 날짜 계산 같은 건 여기서 하지 않는다
 
  // [출력] List에게 원본 데이터 전달
  return (
    <PlannedAccommodationList
      plannedAccommodations={plannedAccommodations}
      startDate={startDate}
    />
  );
};

// PlannedAccommodationList.tsx
 
// 이 컴포넌트가 하는 일: 원본 데이터를 받아 UI 친화적인 형태로 가공 후 Item에 전달
 
const PlannedAccommodationList = ({ plannedAccommodations, startDate }) => {
  return (
    <>
      {plannedAccommodations.map((acc, index) => {
        // [입력] Controller로부터 받은 raw 데이터 + index
        
        // [처리] 날짜 계산, 포맷팅 등 UI용 데이터 생성
        // store 접근은 하지 않는다 — 데이터는 위에서 내려온 것만 사용
        const dateLabel = startDate ? createDateLabel(startDate, index) : null;
 
        // [출력] 이미 가공된 데이터를 Item에 전달
        return (
          <PlannedAccommodationItem
            key={index}
            accommodation={acc}
            dateLabel={dateLabel}
            index={index}
          />
        );
      })}
    </>
  );
};

// PlannedAccommodationItem.tsx
 
// 이 컴포넌트가 하는 일: 가공된 데이터를 화면에 그리는 것뿐
 
const PlannedAccommodationItem = ({ accommodation, dateLabel }) => {
  // [입력] List로부터 이미 가공된 데이터 수신
 
  // [처리] Null 체크 수준의 최소한의 조건 분기만 허용
  // 날짜 계산, API 호출, store 접근은 절대 없음
 
  // [출력] UI 렌더링
  return (
    <div className="accommodation-card">
      <span className="date-label">{dateLabel}</span>
      <p className="name">{accommodation?.name ?? "숙소 없음"}</p>
    </div>
  );
};

// Controller: store에서 여행 시작일 + 숙소 목록 가져오기
const { startDate, plannedAccommodations } = usePlanStore();
 
// List: index 기반으로 "05.16 (목) - 05.17 (금)" 형태 날짜 계산
const dateLabel = startDate ? createDateLabel(startDate, index) : null;
 
// Item: dateLabel + 숙소 이름만 렌더링
<p>{accommodation.name}</p>
<span>{dateLabel}</span>

// Controller: QueryString과 서버 응답 읽기
const { data: places } = useQuery({ queryKey: ['places'], queryFn: fetchPlaces });
const { category } = useSearchParams();
 
// List: category 기반 필터링 후 PlaceCard에 전달
const filtered = places.filter(p => p.category === category);
return filtered.map(place => <PlaceCard key={place.id} place={place} />);
 
// Item(PlaceCard): 받은 place 데이터 렌더링만
<h3>{place.name}</h3>
<p>{place.address}</p>

// Controller: 서버에서 장바구니 데이터 가져오기
const { data: cartItems } = useQuery({ queryKey: ['cart'], queryFn: fetchCart });
 
// List: 가격 포맷팅, 총합 계산 후 각 Item에 전달
const totalPrice = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
return cartItems.map(item => (
  <CartItem
    key={item.id}
    item={item}
    formattedPrice={item.price.toLocaleString('ko-KR')}
  />
));
 
// Item(CartItem): 가공된 가격 데이터 그대로 표시
<p>{item.name}</p>
<span>{formattedPrice}원</span>

// 잘못된 예
const CartItem = ({ itemId }) => {
  const item = useCartStore(s => s.items.find(i => i.id === itemId)); // ❌
  return <p>{item.name}</p>;
};

const CartItem = ({ item }) => { // ✅ 가공된 데이터를 props로 받음
  return <p>{item.name}</p>;
};

// 잘못된 예
const AccommodationList = ({ accommodations }) => {
  const { user } = useAuthStore(); // ❌ List가 인증 상태에 접근
  const filtered = accommodations.filter(a => a.ownerId === user.id);
  // ...
};

// Controller에서
const { user } = useAuthStore();
const myAccommodations = accommodations.filter(a => a.ownerId === user.id);
return <AccommodationList accommodations={myAccommodations} />; // ✅

// 잘못된 예: List 없이 Controller가 Item을 직접 렌더링
const Controller = () => {
  const { items } = useStore();
  return items.map((item, i) => {
    const label = createLabel(item.date, i); // ❌ Controller에서 가공까지
    return <Item key={i} item={item} label={label} />;
  });
};