[모각코]모현에서 모먹지?(2-3) - Home꾸미기 : 카테고리경로 관리

카테고리에 따른 페이지를 만들어보자

---

상세 경로

경로	보여지는 컴포넌트
home/all	All.js
home/location	Location.js
home/menu	Menu.js
home/location/:category home/menu/:category	ByCategory.js

 

1️⃣ 대분류 만들기 3️⃣4️⃣

대분류는 전체, 위치별, 메뉴별로 나뉜다.

 

Tabs로 묶고 각각 Tab으로 관리해준다.

//Home.js

const allMatch = useMatch("home/all");
const locaMatch = useMatch("home/location");
const menuMatch = useMatch("home/menu");
...
<Tabs>
    <Tab isActive={allMatch !== null} onClick={()=>onClick()}>
        <Link to="all"} >전체</Link>
    </Tab>
    <Tab isActive={locaMatch !== null} onClick={()=>onClick()}>
        <Link to= "location"} >위치별</Link>
    </Tab>
    <Tab isActive={menuMatch !== null} onClick={()=>onClick()}>
        <Link to="menu"}>메뉴별</Link>
    </Tab>
</Tabs>

그리고 밑에 중첩경로는 만들어준다

<Routes>
    <Route path = "/all" element = {<All/>}/>
    <Route path = "/location/*" element={<Location/>}/>
    <Route path = "/menu/*" element={<Menu/>}/>
</Routes>

 

2️⃣ 카테고리에 따른 페이지 보여주기

이제! Location과 Menu를 만들어보자!

Location과 Menu는 카테고리를 보여주는 역할을 한다.

 

Link를 통해 카테고리를 누르면 해당 경로로 이동시켜준다.

그리고 useMatch를 통해 해당 경로가 맞는지 가져와서 활성화 시켜준다.

눌러있을 때 카테고리의 색을 바꿔주기 위해 {locaMatch === c.name}일 때 active를 활성화시켜준다. (active는 props 이름!)

...
	${props => props.active && css`
        border: 1px solid ${props=>props.theme.pointColor};
        background-color: #F0EDFF;
    `}
...
function Location(){
    const [category, setCategory] = useState("");
    const [locaCategory, setLocaCategory] = useRecoilState(locaCateState);
    
    const onClick = (name, text) => {
        setCategory(text);
        setLocaCategory(name);
    }
    const cateMatch = useMatch(`home/location/${locaCategory}`);
    return (
        <>
            <Categories >
                {categories.map(c => (
                    <Category 
                    whilehover = {{scale: 1.5}} 
                    isActive = {cateMatch !== null} 
                    active = {locaCategory === c.name}
                    > 
                     <Link to = {`${c.name}`} onClick = {()=>onClick(c.name, c.text)} >
                        <span>{c.emogi}</span>
                        <span>{c.text}</span>
                         </Link>
                    </Category> 
                ))}
            </Categories>
            

            <Routes>
                <Route path = "/:cate" element={<ByCategory category={category}/>}/>
            </Routes>
        </>
    )
}

 

3️⃣ 현재 경로에 따른 Link 상세 설정 해주기

이렇게 만들어 두면 예를 들어

home/location/category 에서 menu버튼을 눌렀을 때

home/home/menu이렇게 되는 오류가 생긴다.

 

그래서! useMatch를 통해 현재 경로에 따라 Link의 경로를 다르게 설정해주려고 한다

다시 Home.js로 돌아가서 만들어지는 모든 경로를 useMatch로 만든다.

const allMatch = useMatch("home/all");
const locaMatch = useMatch("home/location");
const menuMatch = useMatch("home/menu");

const [locaCategory, setLocaCategory] = useRecoilState(locaCateState);
const [menuCategory, setmenuCategory] = useRecoilState(menuCateState);
const locaCateMatch = useMatch(`home/location/${locaCategory}` )
const menuCateMatch = useMatch(`home/menu/${menuCategory}`)

 

이 후 Link에 저 중 하나의 경로라도 맞으면 그냥 원래로 납두고

아니라면 home/을 껴준다.

<Tabs>
    <Tab isActive={allMatch !== null} onClick={()=>onClick()}>
        <Link to={allMatch|| menuMatch || locaMatch || locaCateMatch || menuCateMatch ? "all":"home/all"} >전체</Link>
    </Tab>
    <Tab isActive={locaMatch !== null} onClick={()=>onClick()}>
        <Link to={allMatch|| menuMatch || locaMatch || locaCateMatch || menuCateMatch ? "location":"home/location"} >위치별</Link>
    </Tab>
    <Tab isActive={menuMatch !== null} onClick={()=>onClick()}>
        <Link to={allMatch||  menuMatch || locaMatch || locaCateMatch || menuCateMatch ? "menu":"home/menu"}>메뉴별</Link>
    </Tab>
</Tabs>

 

참고로 onClick은 카테고리에 대한 정보를 초기화시켜주는 함수이다.

 

---