9월28일91일차 - React 탭메뉴에 route 붙이기

목표 :

탭메뉴를 만들고 >

각각의 메뉴에 route를 붙여 >

link로 이동한 route 페이지에서도 탭메뉴가 나타나도록 합니다.

탭메뉴의 메뉴를 클릭하면 <Link to="">에 연결된 url로 이동하게 됩니다.

 

---

( 탭메뉴 만들기 )

탭메뉴의 index 값과 data.id 의 값이 같은 경우에 className에 'on'을 붙여 구현할 것입니다.

>>> 페이지를 로딩하면 "전체"를 선택된 메뉴로 만들기 위해서 useState의 초기값은 0으로 설정합니다.
const Menus = ({ menuTitle, routeURL }) => {
    const [num, setNum] = useState(0);


>>> DATA에 map()함수를 이용해서 탭메뉴 html을 작성합니다.
                {menuTitle.map((el, idx) => {
                    return (
                        <Link
                            to={routeURL + el.link}
                            className="link"
                            key={el.id}
                        >
                            <li
>>> li의 className에서 삼항연산자를 이용해 리스트의 idx와 useState의 값이 같다면 "on"을 붙이도록 합니다.
                                className={`${idx == num ? "on" : ""}`}
                                onClick={() => setNum(idx)}
                            >
                                {el.title}
                            </li>
                        </Link>

---

( 탭메뉴를 route url 페이지로 이동해도 나타나도록 하기 )

const Benefit = () => {
    return (

>>> 탭메뉴 각각의 li에 Route를 생성해 하위 페이지에서도 메뉴가 나타나도록 합니다.
>>> <Routes>로 감싼 뒤에 map()함수로 <Route/>를 만들고

>>> 탭메뉴 컴포넌트를 <Route />의 element로 넘깁니다.
                <Routes>
                    {MENUTITLE.map((it) => {
                        return (
                            <Route
                                key={it.id}
                                element={
                                    <Menus               

 
>>> path="/*"

>>> path의 값으로 "/*" 를 주게되면 하위경로에 여러개의 URL을 연결할 수 있게 됩니다.

 

<Route path="/membership" element="" />    
<Route path="/vip" element="" />                        >>>>>>>>    <Route path="/*" element="" /> // route 하나로 퉁!
<Route path="/brbrbr" element="" />

>>> /benefit 페이지에서만 보이던 탭메뉴가 하위 라우트(/benefit/vip)로 이동하여도 나타나게 됩니다.

 

---

>>> MENUTITLE.link는 각각 "/membership"과 "/vip"로 저장했습니다.

>>> routeURL에는 상위 route의 주소인 "/benefit"을 저장해 props로 전달합니다.
                                        menuTitle={MENUTITLE}
                                        routeURL={routeURL}
                                    />
                            ...
                    })}
                </Routes>

 

>>> <Menus /> 컴포넌트에서 각 탭메뉴의 li에 Link를 연결시켜줍니다.
                {menuTitle.map((el, idx) => {
                    return (
                        <Link
>>> <Link to={routeURL + el.link} 처럼 props로 전달받은 url + link로 보내도록 합니다.
>>> 탭메뉴의 li를 눌러보면 /benefit/membership 페이지로 이동하게 됩니다. 
                            to={routeURL + el.link}
                            className="link"
                            key={el.id}
                        >
                        </Link>

---

새롭게 알게된 route path="/*"
route의 path="/*"를 통해서 여러개의 하위 라우트를 생성하지 않아도 됩니다.
<Route path="/membership" element="" />    
<Route path="/vip" element="" />           >>>>>>>>    <Route path="/*" element="" />
<Route path="/brbrbr" element="" />

개선이 필요한 사항
<Link to="">로 연결할 주소는 <Link to={routeURL + el.link}를 통해
<Link to="/benefit/membership"> 와 같은 형태가 되도록 props를 전달받았습니다.
그런데 여러개의 component로 만들기 위해서는 routeURL이 아닌 
객체의 값으로 el.routeURL과 같이 전달할 수 있도록 해야할 것 같습니다.