[TIL] 0709

컴파운드 패턴을 처음 적용해보았다.
약간씩만 달라지는 ui를 구현할 때 props을 이용하는 것보다 유용하다.
예시를 참고해서 구현해봤는데, 구현하려는 ui가 예시보다 복잡해서 생각보다 컴포넌트가 너무 많이 분할되었다..
이게 맞나 싶은데 복잡한 컴포넌트의 예시를 찾지 못했다.
CarItem.TextContainer컴포넌트를 하나로 합칠까했지만 CarItem.Infor부분이 다르게 적용되어야할 ui가 있어서 결국엔 요소 하나하나 다 분리했다. 좋은 예시를 찾아서 리팩토링해봐야겠다.
또한 확실히 작성할 코드량이 많았기 때문에 꼭 필요한 ui에만 적용해야겠다는 생각을 했다.

const Page = () => (
  <CarListPageContainer>
    <CarItem data={data}>
      <CarItem.Image></CarItem.Image>
      <CarItem.Content>
        <CarItem.TextContainer>
          <CarItem.Name></CarItem.Name>
          <CarItem.Price></CarItem.Price>
          <CarItem.Infor></CarItem.Infor> // 변경될 부분
        </CarItem.TextContainer>
        <CarItem.BadgeList></CarItem.BadgeList> // 변경될 부분
      </CarItem.Content>
    </CarItem>
  </CarListPageContainer>
);

📦CarItem
 ┣ 📂components
 ┃ ┣ 📜BadgeList.tsx
 ┃ ┣ 📜Image.tsx
 ┃ ┣ 📜Infor.tsx
 ┃ ┣ 📜Name.tsx
 ┃ ┣ 📜Price.tsx
 ┃ ┗ 📜index.ts
 ┣ 📜CarItem.tsx
 ┗ 📜useCarItemContext.tsx