중첩 객체에 접근하기

중첩 객체, 즉 객체 안의 객체, 그 객체 안의 객체

const chartData = {
  "quote": {
    "2022-2-23": {
      "quote": "643779.130000"
    },
    "2022-2-24": {
      "quote": "643779.130000"
    },
    "2022-2-25": {
      "quote": "643779.130000"
    },
    "2022-2-26": {
      "quote": "643779.130000"
    }
  }
}

위의 코드에서 각 날짜와 그 날짜의 quote 값을 가져오고 싶을 때

우선 나는 위의 데이터를 가져와서 차트를 구현해야 했다.
x축에는 날짜를, y축에는 날짜별 quote 값을 뿌려줘야 하는데, 다중 객체로 이루어져 있어서 접근을 어떻게 해야할 지 고민을 했다.

useEffect(() => {
   fetch(`백에서 준 주소`)
     .then(res => res.json())
     .then(data => {
       setChartData(data?.quote);
     });
 }, []);

👉🏻 chartData 라는 state 에 해당 데이터를 담고, 그 state 를 업데이트 시켜줄 setChartData(data?.quote) 지정

여기서 ?. 는 옵셔널 체이닝 문법

chartData 에 이제 들어가 있는 데이터.

 "quote": {
    "2022-2-23": {
      "quote": "643779.130000"
    },
    "2022-2-24": {
      "quote": "643779.130000"
    },
    "2022-2-25": {
      "quote": "643779.130000"
    },
    "2022-2-26": {
      "quote": "643779.130000"
    }
  }

🧐 객체로 이루어진 데이터를 [key, value] 이렇게 배열로 바꾸어서 접근하여 데이터를 빼오자

 const changePriceString = price => {
    const convertPrice = Math.floor(parseInt(price) / 1000) * 1000;
    return convertPrice;
  };
  const data = Object.entries(chartData);

  const convertData = data.map(x => ({
    date: x[0],
    price: changePriceString(x[1].quote),
  }));

📝 Object 의 entries() method

• entries 메서드는 Object 의 모든 프로퍼티를 키와 값 쌍으로 배열 형태로 반환해준다.
  -프로퍼티뿐 아니라 가지고 있는 값도 모두 배열 형태로 변환하여 반환한다.

이렇게 key, value 형태로 반환해준다.

const convertData = data.map(x => ({
    date: x[0],
    price: changePriceString(x[1].quote),
  }));

배열로 형태를 바꾼 data 에서 map 을 돌려,
date 는 x[0] 를 가져오게 하고 price 는 x[1]의 quote 를 가져오게 한다.