React | API Data (json) 중복 map 사용 하기

 

 

1주차에 보라님이 상수 데이터로 구현했던 nav 바의 카테고리 목록을 2주차에는 백엔드에서 주는 API 데이터로 교체해야하는 상황이 오게 되었다. 보라님의 코드에서 상수데이터를 API 데이터로 교체 + 내가 구현한 카테고리별 쿼리 파라미터 주소를 link 연결하는것이 목표이다.

---

구현 기능 

상수데이터를 API 데이터로 교체 + 내가 구현한 카테고리별 쿼리 파라미터 주소를 link 연결하기

 

⭐Key Point

• API 데이터 분석
• map 메소드 이중으로 사용하여 카테고리 이름 표시
• 개별 링크 연결
  

Output

 

Code

🥕 API Data 
${BASE_URL}/categories

{
    "results": [
        {
            "category_id": 1,
            "category_name": "샤워",
            "sub_categories": [
                {
                    "sub_category_id": 1,
                    "sub_category_name": "샴푸바"
                },
                {
                    "sub_category_id": 2,
                    "sub_category_name": "솝"
                },
                {
                    "sub_category_id": 3,
                    "sub_category_name": "샤워젤"
                },
                {
                    "sub_category_id": 4,
                    "sub_category_name": "배쓰밤"
                },
                {
                    "sub_category_id": 5,
                    "sub_category_name": "용품"
                }
            ]
        },
        {
            "category_id": 2,
            "category_name": "보디",
            "sub_categories": [
                {
                    "sub_category_id": 6,
                    "sub_category_name": "바디 로션"
                },
                {
                    "sub_category_id": 7,
                    "sub_category_name": "바디 미스트"
                },
                {
                    "sub_category_id": 8,
                    "sub_category_name": "바디 오일"
                },
                {
                    "sub_category_id": 9,
                    "sub_category_name": "바디 스크럽"
                }
            ]
        },
        {
            "category_id": 3,
            "category_name": "페이스",
            "sub_categories": [
                {
                    "sub_category_id": 10,
                    "sub_category_name": "폼 클렌징"
                },
                {
                    "sub_category_id": 11,
                    "sub_category_name": "팩"
                },
                {
                    "sub_category_id": 12,
                    "sub_category_name": "스킨"
                },
                {
                    "sub_category_id": 13,
                    "sub_category_name": "로션"
                }
            ]
        },
        {
            "category_id": 4,
            "category_name": "헤어",
            "sub_categories": [
                {
                    "sub_category_id": 14,
                    "sub_category_name": "헤어 에센스"
                },
                {
                    "sub_category_id": 15,
                    "sub_category_name": "헤어 미스트"
                },
                {
                    "sub_category_id": 16,
                    "sub_category_name": "헤어 스프레이"
                },
                {
                    "sub_category_id": 17,
                    "sub_category_name": "드라이 샴푸"
                }
            ]
        }
    ]
}

 

 

🥕 Nav.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { HiOutlineSearch } from 'react-icons/hi';
import { HiShoppingCart } from 'react-icons/hi';
import { FaUserCircle } from 'react-icons/fa';
import { API } from '../../config';
import { MENUS } from './NavData';
import '../Nav/Nav.scss';

export default class Nav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      category: [],
    };
  }

  onUpdateVisible = isVisible => {
    this.setState({ visible: !isVisible });
  };

  componentDidMount() {
    fetch(`${API.categories}`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          category: data.results,
        });
      });
  }

  render() {
    const { visible, category } = this.state;

    return (
      <nav onMouseLeave={() => this.onUpdateVisible(true)}>
        <div className="innerNav">
          <h1 className="logo">
            <Link to="/productlist?category=1">
              <img src="/images/logo.png" alt="wash korea logo" />
            </Link>
          </h1>
          <div className="gnbWrapper">
            <ul className="gnb">
              {MENUS.map((menu, idx) => {
                const isProductMenu = !(menu === '제품');
                return (
                  <li
                    key={idx}
                    onMouseEnter={() => {
                      this.onUpdateVisible(isProductMenu);
                    }}
                  >
                    <Link to="/">{menu}</Link>
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="users">
            <Link to="/">
              <HiOutlineSearch className="icon" />
            </Link>
            <Link to="/">
              <HiShoppingCart className="icon" />
            </Link>
            <Link to="/login">
              <FaUserCircle className="icon" />
            </Link>
          </div>
        </div>
        {visible && (
          <div className="lnbWrapper">
            <div className="lnb">
              {category.map(menu => {
                return (
                  <ul className="SubMenu" key={menu.category_id}>
                    <li key={menu.category_id}>
                      <Link to={`/productlist?category=${menu.category_id}`}>
                        {menu.category_name}
                      </Link>
                    </li>
                    {menu.sub_categories.map(subMenu => {
                      return (
                        <li key={subMenu.sub_category_id}>
                          <Link
                            to={`/productlist?category=1&sub_category=${subMenu.sub_category_id}`}
                          >
                            {subMenu.sub_category_name}
                          </Link>
                        </li>
                      );
                    })}
                  </ul>
                );
              })}
            </div>
          </div>
        )}
      </nav>
    );
  }
}