[React] Tab Component

Tab

동일한 메뉴 라인에서 뷰를 전환할 때 사용

요구사항

선택된 Tab 메뉴의 li 요소에만 클래스명에 focused가 추가되어야 함

의사코드

1. Tab의 메뉴를 표시할 배열 생성
2. 해당 배열을 바탕으로 map 사용, 요소 만들기
3. 선택된 요소에 상태를 부여하기 위한 useState 생성. 기본값은 첫번째 인덱스(0).
4. onClick 이벤트를 이용해 함수에 클릭한 요소의 인덱스 전달
5. 인덱스로 useState 상태 업데이트
6. 해당 state를 이용, 요소의 인덱스와 비교해 클릭 여부 판단

코드

export const Tab = () => {
  const menuArr = [
    { name: 'Tab1', content: 'Tab menu ONE' },
    { name: 'Tab2', content: 'Tab menu TWO' },
    { name: 'Tab3', content: 'Tab menu THREE' },
  ];
  const selectMenuHandler = (index) => {
    setCurrentTab(index);
  };

  const [currentTab, setCurrentTab] = useState(0);

  return (
    <>
      <div>
        <ul>
          {menuArr.map((ele, idx) => (
            <li
              className={`submenu${idx === currentTab ? ' focused' : ''}`}
              key={idx}
              onClick={() => selectMenuHandler(idx)}
            >
              {ele.name}
            </li>
          ))}
        </ul>
      </div>
    </>
  );
};