[React] React Project에서 간단한 탭 메뉴 만들기

import { useState } from "react";

const TabMenu = () => {
	const [menuNum, setMenuNum] = useState(1);
    
    const tabMenuToggle = (e) => {
    	setMenuNum(e);
    }
    
	return(
    	<>
        	<nav className="menu_list">
            	<ul>
                	<li onClick={() => tabMenuToggle(1)}>Menu_1</li>
                    <li onClick={() => tabMenuToggle(2)}>Menu_2</li>
                    <li onClick={() => tabMenuToggle(3)}>Menu_3</li>
                    <li onClick={() => tabMenuToggle(4)}>Menu_4</li>
                </ul>
            </nav>
            <div className="menu_contents">
            	{menuNum === 1 ? <div>Menu Contents1</div> :
                	(menuNum === 2 ? <div>Menu Contents2</div> :
                    	(menuNum === 3 ? <div>Menu Contents3</div> : <div>Menu Contents4</div>)
                    )
                }
            </div>
        </>
    )
}

export default TabMenu;

분명 더 간단한 방법이 있을텐데... 일단은 내가 할수 있는 기준에선 이게 최선인 거 같다...

 

나중에 써먹을 수 도 있고... 혹시라도 조금 더 개선된 방법을 스스로 터득하면 그때 수정해서 올려야지...

 

혹시라도 잘못된 부분을 지적해주는 댓글은 감사히 받아들이겠습니다!