[JS/React] 객체배열에서 key또는 value만 추출하여 랜더링하기

데이터형태(score를 사용해 평균값 구하기 && 각각 점수 props로 넘겨기)

  {
    "data": "MAIN",
    "product": {
      "product_name": "Broadwick Live",
      "main_image": "https://media.vlpt.us/images/yukyung/post/135d280f-0822-46ac-b299-951a2b956ef6/XL.jpg?w=640",
      "created_at": "2022년 1월 17일",
      "user": "user1",
      "location": "FRANCE",
      "score": [
        { "sensibility": "1.500000" },
        { "intent_to_visit": "2.500000" },
        { "impresstion_on_picture": "9.100000" }
      ]
    }
  }

평균 구하기

{(
  mainVisualData.product.score.reduce(
    (acc, curr) => acc + Number(Object.values(curr)[0]),
    0
  ) / mainVisualData.product.score.length
).toFixed(2)}

props 넘겨주기

{mainVisualData.product.score.map((singleScore, index) => (
  <MainVisualMainGauge key={index}>
    <RatingCircle
      type={Object.keys(singleScore)[0]}
      rate={Number(Object.values(singleScore)[0] * 10)}
      circleId={index}
    />
    <MainVisualMainGaugeLable>
      {Object.keys(singleScore)[0]}
    </MainVisualMainGaugeLable>
  </MainVisualMainGauge>
))}