[React.js + Firebase] react-router-dom 동적 라우팅 - 초간단 사진 게시판 만들기(3)

💡이번 포스트에서는 React에서 동적 라우팅을 사용하여 firebase의 데이터들을 원하는 url에 띄우는 방법을 알아 보도록 하겠습니다.

이전 포스트를 참고 하시면 코드와 프로젝트에 대한 진행상황을 파악하시기 수월합니다.

[React.js + Firebase] React Suspense 적용 - 초간단 사진 게시판 만들기(2)

---

react-router-dom(v6)에서 동적 라우팅을 사용하는 문법은 다음과 같습니다.

<Route path="/:파라미터" element={<컴포넌트 />} />

원하는 경로 위치 뒤에 :/파라미터 를 붙이면, 그 경로 뒤에 오는 모든 url의 변수에 대하여 지정한 컴포넌트를 반환 합니다. 

그리고 접속한 url에 대해서 url을 파싱해서 컴포넌트 내에서 동적으로 처리하게 됩니다.

 

🔦 URL에서 파라미터(Parameter)과 쿼리스트링(Query String)의 차이?

https://example.com/파라미터1/파라미터2?쿼리스트링=1&쿼리스트링=2

파라미터는 /(슬래시)로 구분하고, 주로 데이터를 구분해서 fetch하는 용도로 사용됩니다.
쿼리스트링은 ? 뒤에 붙으며, & 기호로 쿼리스트링끼리 구분합니다. 주로 페이지나 페이지 안에서의 문단을 구분하는 등의 다양한 용도로 사용됩니다.

 

아래의 예시를 살펴보도록 합시다.

Router.js

<Route path="/:categoryId" element={<Category/>} />

Category.js

import { useParams } from "react-router-dom"

function Category() {
    const { categoryId } = useParams()

    return (
        <div>
        {categoryId}
        </div>
    )
}

export default Category

useParams()는 URL의 파라미터를 파싱해서 리턴 해주는 메서드입니다.

위의 코드는 categoryId 위치에 해당하는 파라미터를 변수로 가져와서 화면에 보여주게 됩니다.

이렇게 말이죠!

 

지금까지의 방법을 사용해서 firebase에서 동적으로 데이터를 불러와 보도록 하겠습니다

먼저 firebase에 데이터를 수동으로 추가 해 줍니다.

 

 

동적으로 컴포넌트를 렌더링 할 Category.js를 수정 해 줍니다.

 

💡사용되는 firestore 메서드들에 대해서
collection(db, collection아이디): firestore app(db)에서 지정한 collection 아이디에 대한 위치를 반환합니다.
query(위치): 생성한 firestore 위치에 대한 참조를 반환합니다.
getDocs(참조): 참조의 하위에 있는 문서 객체들을 배열로 반환합니다.

 

아래 코드에서 useParams로 파라미터를 쿼리하고 파라미터와 위에서 생성한 firestore의 collection 아이디와 일치하는 콜렉션의 문서들을 반환해서 사용자에게 보여주는 기능을 구현 할 수 있습니다.

 

Category.js

import { useParams } from "react-router-dom"
import { db } from "../firebase"
import { collection, getDocs, query } from "firebase/firestore"
import { useEffect, useState } from "react"

function Category() {
    const { categoryId } = useParams()
    const [ categoryItems, setCategoryItems ] = useState()
    
    async function getDocuments(categoryId) {
        const categoryRef = query(collection(db, categoryId))
        const queryCategory = await getDocs(categoryRef)
        setCategoryItems(queryCategory.docs)
    }

    useEffect(() => {
        getDocuments(categoryId)
    }, [categoryId])

    return (
        <div>
            <ul>
            {categoryItems && categoryItems.map((doc) => (
                <li>
                {doc.id}
                </li>
            ))}
            </ul>
        </div>
    )
}

export default Category

 

이제 동적으로 데이터 패칭을 아주 간단하게 할 수 있게 되었습니다!

 

지금까지 게시판의 목록을 카테고리별로 접근 할 수 있는 기능을 구현 했습니다. 다음 포스팅에서는 react-router-dom과 styled-components를 활용하여 카테고리의 각 아이템에 링크를 걸어서 동적 라우팅으로 각각의 문서에 대한 페이지를 생성 해 보도록 하겠습니다.

2023.06.13 - [분류 전체보기] - [React.js + Firebase] react-router-dom NavLink 사용법 - 초간단 사진 게시판 만들기(4)

[React.js + Firebase] react-router-dom NavLink 사용법 - 초간단 사진 게시판 만들기(4)