[React] 이중map

react에서 대부분의 UI를 구현할 때 map() 함수를 자주 사용한다

사실 거의 반 필수로 사용하는거 같은데 데이터가 배열 객체 형태로만 존재할 경우 쉽게 데이터를 가져올 수 있다

하지만 점점 데이터의 형태가 복잡해진다면 한번의 map으로 내가 원하는 데이터를 가져올 수 없다

 

예시를 통해 알아본다

 

map()을 활용하기 위한 데이터 만들기

const productData = [
    {
      id: 1,
      name: '블랙 셔츠',
    },
    {
      id: 2,
      name: '하얀 반팔티',
    },
    {
      id: 3,
      name: '파란 에어리즘',
    }
  ];

상품 데이터라는 배열안에 상품 한 개에 해당하는 객체가 존재한다

여기서 이 객체는 배열의 인덱스[0], [1], [2]에 해당한다고 볼 수 있다

이 상품 전부의 name이 필요하다고 할 때 어떻게 하면 이 상품전부의 name을 가져올 수 있을까?

 

먼저 상품 한 개의 이름을 가져오는 건 쉽다 이 상태에서

 

map을 사용하지 않았을 때

console.log(productData[0].name)

직접적으로 index 번호를 부여해주면 내가 필요한 데이터의 name만 뽑아 쓸 수 있다

 

여기서 map()을 사용하여 배열의 길이의 name을 전부 가져오고 싶다면?

 

index를 통한 map() 사용

productData.map((arr, index) => {
          return (
            <div className="product">
              <h4>{productData[index].name}</h4>
              <div>7월 10일 발송</div>
            </div>
          )
        })

 

구조 분해 할당을 통해 id값을 이용한 map() 사용

 productData.map(({ id }) => {
          return (
            <div className="product">
              <h4>{productData[id - 1]?.name}</h4>
              <div>7월 10일 발송</div>
            </div>
          )
        })

 

 

두 가지 방법 중 결과는 똑같이 나올 것이다

 

이중 map()

하지만 우리가 받아오는 데이터는 이렇게 간단하게 들어오지 않는다 복잡하고 배열의 객체의 배열의 객체의 흔히 타고 

들어가는 게 많이 있어 이럴 때 사용할 수 있는 방법 중 한 가지가 이중 map을 사용하는 것이다

 

데이터를 좀 더 구체적으로 만들어 본다

const productData = [
    {
      id: 1,
      name: '블랙 셔츠',
      sizes: [
        {
          size: 95
        }
      ]
    },
    {
      id: 2,
      name: '하얀 반팔티',
      sizes: [
        {
          size: 100
        }
      ]
    },
    {
      id: 3,
      name: '파란 에어리즘',
      sizes: [
        {
          size: 105
        }
      ]
    }
  ];

 

여기서 내가 필요한 것은 하얀 반팔티에 해당하는 size 정보가 필요하다는 가정 한다면 이중 map을 사용하여 쉽게

가져올 수 있다

 

 productData.map((product) => { // 1
          product.sizes.map(({ size }) => { // 2
            return (
              <div className="product">
                <h4>{product.name}</h4>
                <div>7월 10일 발송</div>
                <div>{size}</div>
              </div>
            )
          })
        })

1. productData를 map함수를 사용하여 배열의 길이만큼 반복 실행시켜 준다

product를 인자로 받아

 

2. product.sizes를 map으로 한번 더 돌려주고 구조 분해를 통해 내가 필요한 size의 정보만 가져오면 된다

 

여기서 많이 하는 실수는 첫 번째 map사용 시 에도 return문이 선언되어야 한다는 것

=> arrow function에 마우스를 지긋이 올려다 놓으면 경고를 확인할 수 있는데 이를 절대 무시하지 말자 

이걸로 시간을 많이 허비했던 기억이 있다

 

출력 코드

productData.map((product) => {
          return product.sizes.map(({ size }) => {
            return (
              <div className="product">
                <h4>{product.name}</h4>
                <div>7월 10일 발송</div>
                <div>{size}</div>
              </div>
            )
          })
        })

 

내가 원하는 사이즈까지 잘 출력되어 나오는 걸 확인 할 수 있다