리액트 메뉴 불켜기💡

자바스크립트 제이쿼리에서 click시 addClass로 처리하던 부분이 리액트에선 다른 방식으로 풀어야 해서 난항을 겪고 다른 블로그를 봤지만...설명이 너무 어렵게 되어있어서 그냥 간단히 제가 푼방법을 공유하고자 합니다😀

첫번째 props로 header에 값을 넘겨준다.

const Menu1 = ({number,menuSelect}) => {
    return (
        <div>
            <Header menuNum="0"/>
            <Menu1Section/>
            <Footer/>
        </div>
    );
};

이렇게 Menu1 컴포넌트에 index번호로 쓰일 '0'을 헤더 컴포넌트에 넘겨줍니다.
(추후 다른 경로에서 들어오더라도 Menu1Section 컴포넌트에 들어오면 메뉴에 불이 들어오게 하기 위해서 입니다.)

두번째 받은 props로 불켜기

const Header = ({menuNum}) => {
	const menus = [
        {name:"hot추천", path:"/Menu1"},
        {name:"문화행사", path:"/Menu2"},
        {name:"미세먼지", path:"/Menu3"}
    ]
    
    const [menuSelecet,setMenuSelect] = useState(menuNum)
    
    return (
    	<ul className='nav'>
            {
               menus.map((data,index)=>(
                  <li key={index} style={{color : menuSelecet==index && "#0042bf"}}><Link to={data.path} >{data.name}</Link></li>
               ))
                    }
        </ul>
    );
};

export default Header;

이렇게 menus라는 배열을 만들어 객체로 정보를 저장해 둡니다.

useState를 사용해 상위 컴포넌트에서 보내온 props를 menuSelect에 담아줍니다.(이렇게 하면 해당페이지의 인덱스 번호가 담기겠죠??)

그다음 map메소드로 menu배열의 객체를 html태그로 담아줍니다.

✨그다음 중요!!한 삼항조건문으로 배열의 index번호와 menuSelect의 담긴 번호와 일치하면 원하는 색으로 불을 켜게 만드는 조건문을 걸어둡니다.

이렇게 리액트로 메뉴컨트롤 하는법을 설명해보았는데 풀고보니 간단하지만 막상 시도할땐 아직 초보라 그런지 쉽게 떠오르지 않아 어려웠습니다 ㅠㅠ
그래도 props개념이나 삼항조건문의 개념을 조금 익힌거 같아 기분이 좋습니다 :)