React - Menu Tab 구현하기

사이트를 살펴보면 메뉴 탭이 바뀌는 것에 따라서 보여지는 내용이 달라지는 경우가 정말 많습니다.
객체에 특정 값을 맵핑하는 테크닉을 통해 더 효율적으로 메뉴 탭을 구현하는 방법에 대해 알아보도록 하겠습니다.

• state
• 반복되는 코드를 Array.map()메서드를 활용해서 간결하게 구현!
• 객체 맵핑 이해하기
• 변하지 않는 데이터 사용하기
• 함수 전달 vs 함수 호출
  
  

const MenuTab = () => {
  const [currentId, setCurrentId] = useState(1);
  const [isTabClicked, setIsTabClicked] = useState(false);

  const handleMouseOver = () => {
    setIsTabClicked(true);
  };
  const handleMouseLeave = () => {
    setIsTabClicked(false);
  };

  const clickHandler = id => {
    setCurrentId(id);
  };

  return (
    <div className="menuTab">
      <ul className="tabs">
        {CATEGORY_ARR.map((category, idx) => {
          return (
            <li
              keys={category + idx}
              className={category}
              onClick={() => {
                clickHandler(idx + 1);
              }}
              onMouseOver={handleMouseOver}
              onMouseLeave={handleMouseLeave}
            >
              {category}
            </li>
          );
        })}
      </ul>
      <div
        className={isTabClicked ? 'contents active' : 'contents'}
        onMouseOver={handleMouseOver}
        onMouseLeave={handleMouseLeave}
      >
        {MAPPING_OBJ[currentId]}
      </div>
    </div>
  );
};

//변하는 값이 아니기 때문에 함수 밖에서 변수 선언
const MAPPING_OBJ = {
  1: <Boys />,
  2: <Girls />,
  3: <Toys />,
};

//조건문 대신 객체로 매핑!
const CATEGORY_ARR = ['Boys', 'Girls', 'Toys'];

export default MenuTab;