[React] 카테고리 메뉴 active 표시

 

import { Route, Routes } from "react-router-dom";
import Footer from "./inc/footer";
import UserHead from "./inc/frontHead";
import Header from "./inc/header";
import Main from "./main/main";
import WorkView from "./work/workView";
import WorkList from "./work/workList";
import About from "./about/about";
import Contact from "./contact/contact";
import { useState } from "react";

function Front(){

    return(
        <div className="wrapper">
            <UserHead />
            <Header />
            <Routes>
                    <Route path="/" element={<Main />  } />            
                    <Route path="/work/view/:id" element={<WorkView />  } />
                    <Route path="/work" element={<WorkList />  } />
                    <Route path="/about" element={<About />  } />
                    <Route path="/contact" element={<Contact />  } />
            </Routes>
            <Footer />
        </div>
    )
}

export default Front;

 

위의 코드처럼 페이지마다 각각 1path로 구성되어있다.

(/work의 하위가 3path인 /work/view/*의 모양)

 

여기서 Header컴포넌트 안에는

import { NavLink } from "react-router-dom";

function Header(){
    return(
        <div className="header">
            <div className="wrap">
                <h1 className="logo"><NavLink to="/" activeClassName="active"><img src="/resources/image/logo.svg" alt="LOOP motion studio" /></NavLink></h1>
                <button className="btn_menu"><span className="blind">전체메뉴</span></button>
                <div className="menu_wrap">
                    <ul className="gnb">
                        <li><NavLink to="/about" activeClassName="active">ABOUT</NavLink></li>
                        <li><NavLink to="/work" activeClassName="active">WORK</NavLink></li>
                        <li><NavLink to="/contact" activeClassName="active">CONTACT</NavLink></li>
                    </ul>
                    <ul className="sns">
                        <li><a href="https://www.youtube.com/@loop_motionstudio" target="_blank" title="새창" className="sns_y"><span className="blind">루프 유튜브</span></a></li>
                        <li><a href="https://vimeo.com/user172433218" target="_blank" title="새창" className="sns_v"><span className="blind">루프 </span></a></li>
                        <li><a href="https://www.instagram.com/loop_motionstudio/" target="_blank" title="새창" className="sns_i"><span className="blind">루프 인스타그램</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Header;

(  해당 메뉴임을 표시하도록 css로 색을 입혀야 하는 상황)

이와 같은 코드로 되어있다. 여기에서 NavLink 부분을 통해 to="/work" 로 넣으면 html 상으로는 a태그가 된다. 속성으로 activeClassName="active"를 사용할 수 있다.

 

도메인/work로 들어올 경우 자동으로 class에 active가 추가된다. 이는 하위인 /work/view/*로 들어와도 active가 작동된다.

 

처음에는 목록은 /work/init으로 했고 상세페이지는 /work/view/*로 두어서 작동되지 않았다. to="/work/init"으로 표시해야 했기 때문이다.

 

따라서 react를 사용할 때에는 이런 부분을 감안해서 path를 짜야한다.