[모각코]모현에서 모먹지?(2-4) - Home꾸미기 : 데이터 보여주기

데이터 보여주는건  간단하다

map을 통해서 다르게 보여주기만 하면 될 뿐...

근데 카테고리에 따른 데이터 보여주기는 살짝 복잡하다

암튼  해보자

---

원래 같았으면 api요청해서 axios같은 거 써서 파일을 받아왔겠지만

이번엔 우리가 손수 만들었으므로 그럴필요 없다 그냥 이용만 해주자

 

export const locaCateState = atom({
    key: "locaCateState",
    default: ""
});

export const menuCateState = atom({
    key: "menuCateState",
    default: ""
});

recoil을 통해 현재 누르고 있는 카테고리가 무엇인지 따로따로 관리해줄것이다.

 

1️⃣ 눌린 버튼에 따라 state 관리하기 3️⃣4️⃣

// 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 (
    <Wrap>
        <Categories >
            {categories.map(c => (
                <Category 
                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>
    </Wrap>
)

Location만 설명하면 

저렇게 onClick이벤트를 넣어줘서 category와 locaCategory를 설정해주고 Link to로 이동시켜준다.

 

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

이후 중첩 라우터를 이용해주고 category를 다음 컴포넌트에 넘겨주었다.

 

2️⃣ByCategory에서 데이터 필터링하기

카테고리를 넘겨받았으니 우리는 그 카테고리에 해당하는 데이터만 보여주어야 한다.

 

const {cate} = useParams();

const match = useMatch(`/${cate}`);
const locaMatch = useMatch("home/location/*");

일단 현재 경로에 대한 useMatch를 선언해준다.

 

이후 

if (locaMatch){
        for (var i = 0; i < 4 ;i++){
            if (category === categories[i].text){
                category = categories[i].short;
            }
        }
    }

locaMatch는 넘겨받은 카테고리랑 데이터 내에서의 이름이 조금 다르다 .

그래서 따로 배열을 선언한 후 바꿔주었다.

 

const categoryData = data.apiList.filter(d => (locaMatch ?d.bLocation :d.bCategory) === category)

filter함수를 통해 locaMatch가 ture라면 bLocation과 category를 비교해주고

false라면 bCategory와 비교해준다.(Locaion과 Menu 둘 다 그 다음으로 ByCategory를 렌더링 해주었으므로 구별해주어야해서)

 

다 걸러졌으면 그냥 해당 목록을 보여주기만 하면 된다.

<Category>
    {categoryData.map(b => 
    <div key = {b.key}isActive = {match !== null} >
        <CategoryBox 
        index = {b.key}
        name = {b.name}
        bCategory = {b.bCategory}
        bLocation = {b.bLocation}
        hastag = {b.hashtag}
        />
    </div>)}
</Category>

 

참고로 Box는 나중에 bookmark관리 때문에 넘겨준 것이다.

 

완성!