[최종 프로젝트 - 리팩토링] props 구조분해할당

 

 

 

이번 팀 프로젝트를 진행하면서 가장 아쉬웠던 부분 중 하나는 컴포넌트를 제대로 나누지 못한 부분이다.

그래서 한 페이지의 코드가 300줄이나 되는 대참사가 생겨버렸다.. 가독성이 조금 아쉽다는 생각??

(애초에 코드 한 줄의 길이를 80으로 제한하고 작업을 하긴 했지만..ㅎㅎ )

 

그래서 전체적으로 일단 내가 담당한 탄소 계산기 부분을 컴포넌트화 시키는 작업을 진행 중이고

이번에 적은 내용은 props와 관련된 내용이다.

 

 

처음 코드

//calculator > result > [year] > [month] > Page.tsx > ResultPage

<div className="flex flex-wrap w-full md:w-[1200px] gap-[12px] md:gap-[30px]">
  <CarbonEmissionCard
    logo={"/calculate/electricity_color.svg"}
    title={"전기"}
    usageValue={currentData?.electricity_usage}
    co2Value={currentData?.electricity_co2}
    isHighest={currentData?.electricity_co2 === highestCo2Value}
    isLowest={currentData?.electricity_co2 === lowestCo2Value}
    unit="kwh"
  />
  <CarbonEmissionCard
    logo={"/calculate/gas_color.svg"}
    title={"가스"}
    usageValue={currentData?.gas_usage}
    co2Value={currentData?.gas_co2}
    isHighest={currentData?.gas_co2 === highestCo2Value}
    isLowest={currentData?.gas_co2 === lowestCo2Value}
    unit="m³"
  />
  <CarbonEmissionCard
    logo={"/calculate/water_color.svg"}
    title={"수도"}
    usageValue={currentData?.water_usage}
    co2Value={currentData?.water_co2}
    isHighest={currentData?.water_co2 === highestCo2Value}
    isLowest={currentData?.water_co2 === lowestCo2Value}
    unit="m³"
  />

  ...

</div>

 

 

ResultPage에서 CarbonEmissionCard 라는 컴포넌트를 하나하나 작성을 했었다.

총 5개의 카드가 있었는데 props로 넘겨주는 내용들이 좀 있어서 그런지 생각보다 줄이 길어졌었다.

 

그래서 CarbonEmissionCard를 CarbonEmissionCardList라는 컴포넌트 안에서 작성하여

최상단 페이지에서 조금은 더 간결하게 작성되게 바꾸고 싶어졌다.

 

 

 

처음 작성한 방법  (실패 - 데이터가 다 0 으로 나옴)

// ResultPage
<CarbonEmissionCardList currentData={currentData} />


// CarbonEmissionCardList.tsx
const CarbonEmissionCardList = (currentData) => {
...
  return (
    <div className="flex flex-wrap w-full md:w-[1200px] gap-[12px] md:gap-[30px]">
      <CarbonEmissionCard
        logo={"/calculate/electricity_color.svg"}
        title={"전기"}
        usageValue={currentData?.electricity_usage}
        co2Value={currentData?.electricity_co2}
        isHighest={currentData?.electricity_co2 === highestCo2Value}
        isLowest={currentData?.electricity_co2 === lowestCo2Value}
        unit="kwh"
      />
    ...
}

 

위에와 같이 작성을 했지만 모든 데이터가 0으로 나오더라

 

그 이유는 아래와 같이 미리 작성을 해놨기 때문..

currentData?.electricity_co2 ?? 0

 

 

그래서 currentData를 console.log로 찍어보니까

값이 너무나도 잘 나온다?

{
    "currentData": {
        "record_id": "29edeabc-33b1-438d-9c6c-ed448dde4fc7",
        "user_id": "0c4f85dc-42d3-456f-9233-0fd70ac58f77",
        "water_usage": 20,
        "water_co2": 4.74,
        "gas_usage": 20,
        "gas_co2": 43.52,
        "electricity_usage": 20,
        "electricity_co2": 9.56,
        "waste_volume": 20,
        "waste_co2": 11.15,
        "carbon_emissions": 71.58,
        "record_date": "2024-12-01T22:47:13.049575+00:00",
        "created_at": "2024-12-01T22:47:13.049575+00:00",
        "updated_at": "2024-12-01T22:47:13.049575+00:00",
        "car_usage": 20,
        "car_co2": 2.61,
        "year": 2024,
        "month": 12
    }
}

 

그리고 여기서 아차... 싶었다

지금은 currentData를 Props 객체 전체로 받고 있었던 것!!

한마디로 props 안에 currentData라는 속성에 접근을 해야하는데 그러지 못하고 있었다.

 

 

해결방법 : 구조 분해 할당

props 객체로 전달된 값을 컴포넌트 안에서 쉽게 사용하기 위해 구조 분해를 통해 currentData를 추출하기!

const CarbonEmissionCardList = ({ currentData }) => {
  // 이제 currentData에 바로 접근 가능
};

 

 

그리고 추가로 type 지정까지 완료해주기

const CarbonEmissionCardList: React.FC<{ currentData: MonthlyData | null }> = ({
  currentData
}) => {
};

 

 

정말 자주 사용하던 구조분해할당..

컴포넌트화를 시키다보니 까먹고 적용을 못시키는 경우가 종종 생기더라

 

조금 더 집중해서 코드를 확인해보자!!