React의 객체 배열에서 Array.prototype.map()을 사용할 때 구조 분해

내가 만들고 있는 웹 응용 프로그램에서 저는 종종 API(응용 프로그래밍 인터페이스)에서 반환된 개체 배열을 반복하고 React를 사용하여 프런트 엔드에 데이터를 표시합니다. 다음은 API의 JSON 응답 예입니다.

[
  {
    "id": 42,
    "addressee": {
      "id": 98,
      "firstName": "James",
      "lastName": "Deacon",
      "photoLink": "images/IMG_3598.JPG",
      "city": "Atlanta",
      "state": "GA",
      "country": "United States",
      "createdAt": "2019-12-23T00:33:11.000Z",
    },
  },
  {
  "id": 43,
  "addressee": {
    "id": 99,
    "firstName": "Billy",
    "lastName": "Gato",
    "photoLink": "/images/IMG_9923.JPG",
    "city": "Chattanooga",
    "state": "TN",
    "country": "United States",
    "createdAt": "2019-10-13T04:22:42.000Z",
    }
  }
]

저는 React를 사용하여 API에서 검색한 위의 데이터를 매핑하고 아래와 같이 Card 구성 요소에 props로 전달합니다.

return(
  <div className="list">
    {list.map(element => (
      <div className="card" key={element.id}>
        <Card
          addresseeId={element.addressee.id}
          firstName={element.addressee.firstName}
          lastName={element.addressee.lastName}
          photoLink={element.addressee.photoLink}
          city={element.addressee.city}
          stateCode={element.addressee.stateCode}
          createdAt={new Intl.DateTimeFormat("en-US", {
            year: "numeric",
            month: "long"
          }).format(new Date(element.addressee.createdAt))}
        />
      </div>
    ))}
  </div>
)

"element.addressee"를 반복해서 복사하고 붙여넣기 하는 것이 귀찮아서 ES6의 구조 분해를 사용하여 덜 반복적으로 만드는 방법에 대해 생각하기 시작했습니다. 내가 시도한 첫 번째 것은 전통적인 const { x, y } = 요소 패턴이지만 ESLint는 "const"에 대해 불평했습니다. 그래서 검색을 해보았지만 JSX의 Array.prototype.map()에서 현재 요소를 구조화하는 방법에 대해 많이 찾지 못했습니다.

나는 거의 포기했지만 마침내 문서를 읽는 데 의지했고 변수에 선언과 별도로 값을 할당할 수 있는 선언 없이 할당에 걸려 넘어졌습니다. 이 구문({ x, y } = 요소)을 사용하면 const { x, y } = 요소와 마찬가지로 유효합니다. Array.prototype.map()의 경우 array.map(({ x, y }) => {//콜백 함수 }); 요소를 분해하고 x와 y를 할당합니다. 아래 코드 스니펫은 카드 구성 요소를 리팩토링하고 "element.addressee"를 여러 번 입력하는 것을 건너뛰기 위해 이것을 어떻게 사용했는지 보여줍니다.

return(
  <div className="list">
    {matchesFilteredByStatus.map(
      ({ id, addressee: {
        id: addresseeId,
        firstName,
        lastName,
        photoLink,
        city,
        stateCode,
        createdAt}, }) => (
      <div className="card" key={id}>
        <Card
          addresseeId={addresseeId}
          firstName={firstName}
          lastName={lastName.substring(0,1) + "."}
          photoLink={photoLink}
          city={city}
          stateCode={stateCode}
          createdAt={new Intl.DateTimeFormat("en-US", {
            year: "numeric",
            month: "long"
          }).format(new Date(createdAt))}
        />
      </div>
    ))}
  </div>
)