Tab 메뉴 만들기를 기억하기위해 이 글을 작성한다.

전체 코드

import React, { useState } from "react";
import styled from "styled-components";

const Container = styled.div`
	width: 50%;
`;

const List = styled.ul`
	background-color: #bebebe;
	width: 100%;
	height: 80px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 10px;
	border-radius: 50px;
	text-align: center;

	.item {
		color: white;
		cursor: pointer;
		padding: 10px;
		border-radius: 20px;
	}

	.selected {
		background-color: black;
	}
`;

const Navigation = () => {
	const workouts = ["스쿼트", "벤치프레스", "데드리프트", "오버헤드프레스"];
	const [isActiveIdx, setIsActiveIdx] = useState(0);

	const activeMenuHandler = (index) => {
		setIsActiveIdx(index);
	};

	return (
		<Container>
			<List>
				{workouts.map((w, idx) => (
					<li
						key={idx}
						className={
							isActiveIdx === idx ? "item selected" : "item"
						}
						onClick={() => activeMenuHandler(idx)}
					>
						{w}
					</li>
				))}
			</List>
		</Container>
	);
};

export default Navigation;

우선 useState로 index를 설정해준다.
그런 후 map을 돌면서 인덱스를 비교하여 맞으면 item selected 클래스를 적용하고, 아니면 item 클래스만 적용한다.