🎯 MenuTab?

• 사이트를 보면 메뉴 탭에 따라 보여지는 내용이 달라지는 경우가 많다.
• react와 맵핑(mapping)을 통해 효율적으로 메뉴 탭을 구성하는 방법에 대해 배워봤다.

✅ CheckList

• state
• 반복되는 코드 Array.map() 메소드를 활용하여 간결하게 구현!
• 맵핑
• CONST_DATA 사용
• 함수 전달 vs 함수 호출

Components

• First
• Second
• Third
• MenuTab

First

import React from "react";

export default function First() {
  return <div>First</div>;
}

• <div>태그 안에 first 내용을 적은 컴포넌트이다.
• Second, Third 컴포넌트도 내용만 다른 똑같은 형식의 컴포넌트이다.

MenuTab

• 상수 데이터를 2개 사용한다.
  • First, Second, Third 컴포넌트를 담을 객체 데이터 (MAPPING_OBJ)
  • 맵핑을 적용할 배열 데이터 (CATEGORY_ARR)
• MAPPING_OBJ의 key값을 1,2,3으로 설정하고 이 key값을 읽을 state변수(currentId)를 useState을 통해 선언한다.
• 반복되는 매뉴탭 요소를 <ul>태그 안의 <li>태그 맵핑을 통해 구현
• currentId를 관리할 함수 clickHandler를 설정하고 해당 요소(메뉴탭)의 onClick이벤트에 전달
  • onClick이벤트에 전달되는 함수는 () => clickHandler(idx + 1)로 click을 할때마다 currentId state 값을 1 더해준다.
• 매뉴탭을 눌렀을 때 내용을 보여주는 요소는 MAPPING_OBJ의 key값(currentId)에 해당하는 value값을 보여준다.

import React, {useState} from "react";
import First from "./components/First";
import Second from "./components/Second";
import Third from "./components/Third";
import "./MenuTab.scss";

export default function MenuTab() {
  const [currentId, setCurrentId] = useState(1);

  const clickHandler = (id) => {
    setCurrentId(id);
  }
  return (
    <div className="wrapper">
      <ul className="tabs">
        {CATEGORY_ARR.map((category, idx) => {
          return (
            <li
              key={category + idx}
              className={category}
              onClick={() => clickHandler(idx + 1)}>
              {category}
            </li>
          );
        })}
      </ul>
      <div className="contents">
        {MAPPING_OBJ[currentId]}
      </div>
    </div>
  );
}

const MAPPING_OBJ = {
  1: <First />,
  2: <Second />,
  3: <Third />,
};

const CATEGORY_ARR = ["first", "second", "third"];

함수전달 vs 함수호출 & Callback 함수

• 함수 전달과 함수 호출의 차이에 대한 개념은 Callback 함수로 정의할 수 있다.
• Callback함수란 이름 그대로 나중에 호출되는 함수이다.
• 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 동록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.
• 위 코드를 예시로 할 경우 clickHandler 함수는 onClick 이벤트에 전달이 되고 onClick이벤트가 발생하였을 때 clickHandler 함수를 호출한다.
• 콜백함수란 특정함수에 전달되어 특정함수가 어떤조건에 의해 호출하는 함수라고 간단하게 말할 수 있다.
• 참고사이트
• Callback함수에 대해 다룬 내 블로그 내용