서브라우팅이란?

서브 라우트는 라우트 내부에 라우트를 다시 정의 하는 것을 의미.

탭메뉴를 누르면 해당하는 컴포넌트를 띄우고 싶었다.
서브라우팅을 알기전에 state 상태관리 하는 방법 밖에 생각나지 않아서
state를 사용해서 탭메뉴를 구현했다.

state값으로 구현하기

서브라우팅을 사용하기 전에는 state값으로 상태관리해서 삼항연산자를 사용해서
조건에 맞을 경우에만 해당하는 컴포넌트를 보여줬다.

1. state값 만들기

tab,setTab이라는 state값을 만들어서 state값에는
Product와 Category만 받을 수 있게 설정해놓고
나는 처음에 Product를 띄우고 싶어서 초기값을 Product로 써줬다.

2. 컴포넌트 넣는 자리에 조건 넣기

나는 state값과 동일할때 컴포넌트를 불러줄거라서 이렇게 만들어주었다.
{tab === 초기값 ? <컴포넌트1/> : <컴포넌트2/>}

서브라우팅으로 구현하기

서브라우팅을 들어보기만하고, 정확하게 어떻게 쓰이고, 쓰는 방법도 몰랐지만,
state로 관리하는 방법보다 훨씬 간단했다.

라우트를 컴포넌트 뷰 내에서도 쓸 수 있다.
항상 라우트와 스위치는 App.js에서만 쓸 수 있는 줄 알았다. (고정관념 금지하자❌)

실제 코드에 적용해보기!

//컴포넌트.js

import Product from "./products/Products";
import Category from "./categories/CategoriesView";
import { Route, Switch } from "react-router";

<AddCategoryViewLayout>
        <nav>여기는 네브바입니다.</nav>
        <SubNav/>
        <Switch>
            <Route exact path={"/products"} component={Product}/>
            <Route exact path={"/categories"} component={Category}/>
        </Switch>
        <Toast isActive={isActive} setIsActive={setIsActive} message="Product 1 has been added!" />
</AddCategoryViewLayout>

컴포넌트를 switch 문으로 묶어주고 Route 컴포넌트로 만들어준 후,
각 컴포넌트에 링크를 설정해준다.

// 메뉴바 js
const handleProductsMenu = () => {
	setSelected(!selected);
    history.push('/products');
}

const handleCategoriesMenu = () => {
	setSelected(!selected);
    history.push('/categories');
}

//app.js

<BrowserRouter>
            <Switch>
  		<Route path={"/"} component={MainListView} />
                <Route exact path={"/add"} component={AddNewCategory} />
                <Route exact path={"/edit"} component={EditCategory} />
   	    </Switch>
</BrowserRouter>

그리고 여기서 중요한 핵심이 나온다.

<Route exact path={"/"} component={MainListView} />
일반적으로 라우트를 쓸때 이렇게 생긴 Route였지만
<Route path={"/"} component={MainListView} />
exact를 path만 사용해주었다.

왜 이렇게 했을까?

exact path / exact component

Route는 하나의 컴포넌트 개념이라는 것으로 이해하자.

exact 뜻은 정확한이라는 뜻이다.
말 그대로 정확해야 한다.

exact path={"/"} 이라고 되어있으면,
주어진 경로인 / 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여주겠다는 뜻이다.

---

서브라우팅 중 흔한 오류

나는 탭메뉴를 구현한 것 뿐이고 다른 코드는 수정한 게 없는데
Add category를 누르면 갑자기 흰 배경이 뜨는 오류가 생긴다.

그 이유는 간단하지만 아주 중요한 개념이다.

⭐️ 코드는 위에서 아래로 읽는다!!!

경로를 위에서 부터 찾기 때문에
/가 포함된 url은 전부 다 서브라우팅을 적용한 뷰가 나올 것이다.

💡 해결방법

해결방법은 간단하다.
정확하게 url 주소가 읽혀야하는 코드는 제일 상단으로 옮기고,
서브라우팅이 적용된 코드는 제일 하단으로 옮겨야한다.

//app.js 해결전

<BrowserRouter>
            <Switch>
  		<Route path={"/"} component={MainListView} />
                <Route exact path={"/add"} component={AddNewCategory} />
                <Route exact path={"/edit"} component={EditCategory} />
   	    </Switch>
</BrowserRouter>

//app.js 해결후

<BrowserRouter>
            <Switch>
                <Route exact path={"/add"} component={AddNewCategory} />
                <Route exact path={"/edit"} component={EditCategory} />
                <Route path={"/"} component={MainListView} />
   	    </Switch>
</BrowserRouter>

---

그럼 state랑 서브라우팅 중에 뭐가 좋은걸까?

특정 라우트 내에 탭 같은것을 만들게 된다면,
단순히 state 로 관리하는 것 보다 서브 라우트로 관리를 하는 것을 권장.

그 이유는, setState 같은것을 할 필요도 없고,
링크를 통하여 다른 곳에서 쉽게 진입 시킬 수도 있고,
나중에 검색엔진 크롤링 까지 고려한다면,
검색엔진 봇이 더욱 다양한 데이터를 수집해 갈 수 있기 때문이다.

검색엔진이란?

컴퓨터 시스템에 저장된 정보를 찾아주는 것을 도와주도록 설계된 정보 검색 시스템이다.