React | useQuery, useSearchParams

미니프로젝트 트러블 슈팅
👉 항해99 14기 미니프로젝트주차 6조

😭 하나의 컴포넌트에서 사계절 get Api를 요청하고 싶을 때

1. 초기 시도

각 계절별 query string이 담긴 get Api를 4개 만들었다

// 봄
const getSpring = async () => {
            const response = await axios.get('/api/boards?season=spring}')
            return response.data.data
    }

const { data: spring} = useQuery('spring', getSpring)

// 여름
const getSummer = async () => {
            const response = await axios.get('/api/boards?season=summer}')
            return response.data.data
    }

const { data: summer} = useQuery('summer', getSummer)

// 가을
const getFall = async () => {
            const response = await axios.get('/api/boards?season=fall}')
            return response.data.data
    }

const { data: fall} = useQuery('fall', getFall)

// 겨울
const getWinter = async () => {
            const response = await axios.get('/api/boards?season=winter}')
            return response.data.data
    }

const { data: winter} = useQuery('spring', getWinter)

1. 실패 이유

한 페이지에서 get 요청을 4번씩이나 보내서 비효율적이고, 반복되는 코드가 많다

1. 해결 방법

useSearchParams를 사용해서 query string으로 이루어진 현재 페이지의 value를 추출한다

🔎 Query String

localhost:3000/main?season=spring
key => season
value => spring

const [searchParams, setSearchParams] = useSearchParams()

useSearchParams을 사용해서 두 개의 함수를 반환시킨다

let season = searchParams.get('season')

season이라는 변수를 선언해서 query string 값을 가져오는 searchParams의 season(key)에 해당하는 value를 구한다

/api/boards?season=winter 변수 season = winter

const getBoard = async () => {
            const response = await axios.get(`/api/boards?season=${season}`)
            return response.data.data
    }

const { data: board} = useQuery(['board', season], getBoard)

get Api를 하나로 줄이고 공통된 Api 중, 바뀌어야 하는 부분에 템플릿 리터럴로 변수 season을 넣어준다

useQuery의 쿼리키가 바뀔 때마다 데이터를 받아와야 하기 때문에 불러낸 데이터인 board와 계절이 바뀌는(페이지가 이동하게 되는) season을 배열 형태로 넣어준다