속성이 다른 데이터들을 같은 구성으로 렌더링하기

console.log(combinedData); 찍으니 이제 date별로 data가 나오게 되었다.

하지만 각자 속성이 다른 계좌 데이터와 현금 데이터...
리턴문으로 렌더링할때 조금 신경을 써줘야 했다

export default function MonthConsumptionDetail({
  combinedData,
}: {
  combinedData: CombinedData[];
}) {
  const detailBoxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (detailBoxRef.current) {
      const itemCount =
        combinedData?.reduce(
          (height, group) => height + group.data.length,
          0
        ) || 0;
      const 날짜갯수 = combinedData.length;
      const calculatedHeight = (itemCount + 날짜갯수 * 2 - 7) * 5;
      detailBoxRef.current.style.height = `${calculatedHeight}vh`;
      //console.log(itemCount)
    }
  }, [combinedData]);

  return combinedData.length === 0 ? (
    <없다>소비 내역이 없습니다.</없다>
  ) : (
    <ConsumptionDetailBox ref={detailBoxRef}>
      {combinedData.map((group, index) => (
        <ConsumptionDetailContainer key={index}>
          <DateContainer>{parseInt(group.date.split("-")[2])}일</DateContainer>
          {group.data.map((item) => renderItem(item))}
          {/* <DayItem>
              <NameContainer>
                <img src={dot} alt="icon" />
                <div className="title">{item.}</div>
              </NameContainer>
              <PriceContainer>
                <div className="price">{item.}</div>
                <div className="source">{item.}</div>
          </PriceContainer>
          </DayItem>*/}
        </ConsumptionDetailContainer>
      ))}
    </ConsumptionDetailBox>
  );
}

function renderItem(item: CombinedItem) {
  if ("bankName" in item) {
    //계좌 데이터 처리
    return (
      <DayItem>
        <NameContainer>
          <img src={dot} alt="icon" />
          <div className="title">{item.paymentResponse.purpose}</div>
        </NameContainer>
        <PriceContainer>
          <div className="price">{item.paymentResponse.amount}</div>
          <div className="source">{item.bankName}</div>
        </PriceContainer>
      </DayItem>
    );
  } else {
    return (
      <DayItem>
        <NameContainer>
          <img src={dot} alt="icon" />
          <div className="title">{item.purpose}</div>
        </NameContainer>
        <PriceContainer>
          <div className="price">{item.amount}</div>
          <div className="source">{item.paymentType}</div>
        </PriceContainer>
      </DayItem>
    );
  }
}

방법은 renderItem이라는 함수로 따로 빼서,

특정 속성이 있는 경우와  없는 경우로 나누어서
리턴문을 다르게 작성하는 것이다 ^^

이렇게 처리하면 데이터의 속성이 일치하지 않아도 
화면상에 같은 구성으로 렌더링 할 수 있다..