[React] depth 데이터 props로 받아오기

depth 있는 객체 데이터 받아오기

이전 게시글에 props를 사용하지 않고 props에 담겨진 원하는 데이터를 구조분해할당하여 바로 가져올 수 있었다.

만약 해당 데이터가 객체 속의 객체, 그 객체 속의 객체 속의 객체....무한반복....까지는 아니지만 여튼 아주 DEEP한 곳에 있다면...🤦‍♀️ 벌써 머리 깨짐...

하지만 생각보다 간단하다는 것!!

//Card.js

function Card({ id, name, email }) {
  const url = `https://이미지주소/${id}?size=180x180`;
  return (
    <div className="cardContainer">
      <img src={url} alt="monsters" />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

위의 코드에 작성된 바와 같이 images, name, email에 대한 정보가 출력되어 있다.

만약 각각의 몬스터를 사용하는 user의 위치를 알고 싶다면??
그럼 데이터부터 살펴보자

이전 게시글에서 부모인 <CardList/> 컴포넌트에서 자식인 <Card/> 컴포넌트에 monsters의 데이터를 넘겨주었다.

monsters에 담긴 데이터들은 이렇게 생겼다.

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Brenden",
    "email": "Sin563e@april44.biz",
    "address": {
      "street": "Kul Night",
      "suite": "Apt. 5576",
      "city": "Vancouver",
      "zipcode": "9098-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.14332696"
      }
 ]

배열 안에 위의 객체가 10개 담겨있지만 너무 길어서 1개의 객체만 가져왔다.
id, name, email 등은 depth가 한 번이기 때문에 쉽게 가져올 수 있다.

function Card({ id, name, email }) {}

하지만 세번의 depth가 있는 lat의 정보를 가지고 오고 싶다면 어떻게 작성해야 할까??

function Card({ id, name, email, address.geo.lat }) {}

이렇게 작성해야 할까?
그럼 데이터를 넘겨준 부모 컴포넌트인 CardList.js에서 다시 값을 넘겨줘야하네...
그래 해보자!

(제가 다 해봤습니다. error...)

그럼 어떻게 합니까??

오히려 간단했다..

function Card({id, name, email, address: { geo: { lat },},}) {
  const url = `https://이미지주소/${id}?size=180x180`;
  return (
    <div className="cardContainer">
      <img src={url} alt="monsters" />
      <h2>{name}</h2>
      <p>{email}</p>
      <p>{lat}</p>
    </div>
  );
}

객체의 모양 그대로 작성하면 된다.

function Card({id, name, email, address: { geo: { lat },},}) 

사용할 때는 가져오고 싶은 값만 작성하면 끝!

<p>{lat}</p>

user의 위도 정보인 lat도 출력되는 것을 볼 수 있다.

---

정리 TIME

depth가 있는 데이터를 props로 가져오기 위해서는
객체의 모양 그대로 가져오면 된다!