[React] 이중 map

react에서는 배열에 반복문을 사용할 때, for문이나 while문보다는 map함수를 사용하게 되는데, 사용하다보니 이중 혹은 그 이상의 반복문이 필요한 경우가 종종 발생했다.

{
  "product": [
    {
      "id": 1,
      "name": "척테일러 올스타 리프트 캔버스",
      "price": "75000",
      "gender": "여성",
      "color_name": "블랙",
      "main_detail": "베스트셀링 플랫폼 스니커즈",
      "sub_detail": "아이코닉 척테일러 올스타를 플랫폼 솔과 함께 만나보세요.",
      "features": "가볍고 견고한 캠퍼스 어퍼, 시즌리스, 타임리스한 실루엣, 기존 제품보다 높은 고무 플랫폼 미드솔",
      "feature_image": "https://image.converse.co.kr/cmsstatic/product/21552/560250C-2.jpg",
      "main_image": "https://image.converse.co.kr/cmsstatic/product/560250C_560250C_pdp-primary.jpg?gallery="
    },
    {
      "sub_image": [
        "https://image.converse.co.kr/cmsstatic/product/560250C_560250C_02.jpg?browse=",
        "https://image.converse.co.kr/cmsstatic/product/560250C_560250C_03.jpg?browse=",
        "https://image.converse.co.kr/cmsstatic/product/560250C_560250C_04.jpg?browse=",
        "https://image.converse.co.kr/cmsstatic/product/560250C_560250C_05.jpg?browse=",
        "https://image.converse.co.kr/cmsstatic/product/560250C_560250C_06.jpg?browse=",
        "https://image.converse.co.kr/cmsstatic/product/560250C_560250C_07.jpg?browse="
      ],
      "color_list": [
        {
          "id": 1,
          "main_image": "https://image.converse.co.kr/cmsstatic/product/560250C_560250C_pdp-option.jpg?browse="
        },
        {
          "id": 219,
          "main_image": "https://image.converse.co.kr/cmsstatic/product/560251C_560251C_pdp-option.jpg?browse="
        }
      ],
      "size_list": [220, 225, 230, 235, 240, 245, 250, 255, 260]
    }
  ]
}

• 신발 상세 페이지의 mock data인데, 신발 하나당 배열안에 두개의 객체를 활용해서 해당 데이터를 위해서 두칸씩 건너 뛸 필요가 있었다. 그 당시에는 백엔드 쪽에서 객체 하나로 합치는 것이 불가능하다고 그런 줄 알았는데 나중에 수정했다. 그리고 아래에 color list키를 보면 키값으로 배열이 들어와서, main_image를 활용하기 위해서는 따로 배열에 담아서 사용할 필요가 있었다.

class ShoeColor extends Component {
  render() {
    const { product } = this.props;

    const listShoeColor = product.map((_, i) => {
      if (i % 2 === 1) {
        const shoeColorList = product[i].color_list.map((color, j) => {
          return color.main_image;
        });
        const shoeIdList = product[i].color_list.map((color, j) => {
          return color.id;
        });
        return (
          <>
            {shoeColorList.map((_, k) => {
              return (
                <div className="shoeColorImageEach">
                  <ShoeColorList shoeColorList={shoeColorList[k]} shoeIdList={shoeIdList[k]} />
                  <div className="underShoeColorImage"></div>
                </div>
              );
            })}
          </>
        );
      }
    });

• 맨 처음의 map은 두칸마다 가기 위해 사용한 것이라 나중에 리팩토링 할 때 의미가 없게 되었다. 두번째와 세번째 map은 각각의 id와 color_list를 정리한 배열이고, 마지막 map에서 정리된 배열안의 값들을 활용했다.