Path variable Query string 으로 바꾸기

API 가 동작을 안 하고 있다길래... 확인해봤더니 쿼리 스트링으로 보내는걸 리엑트에서 Path variable로 받고 있었다. 
보내는 형식이 저랬다면, 지금까지 정상적으로 처리가 안됐을텐데?

test?code=1234&search=안녕  // 이렇게 보내고 있었는데
test/1234/안녕   // 이렇게 보내겠지? 하고 받도록 구현되어있었다.

---

원본 (그냥 간단하게 적었다)

const middleHandler = () => {
 const {code, search}= useParams();
 return {
 	<Page code={code} search={search} />
 }
}

function App(){
	return (
    	<Router className= 'test'>
            <Switch>
            	<Route path="/test/:code/:search" component={middleHandler}/>
            </Switch>
        </Router>
    )
}

const Page = (props) => {
    const [code,setCode] = useState();
    const [search,setSearch] = userState();
    useEffect(() => {
    	setCode(props.code);
        setSearch(props.search);
    })
}

---

변경

const middleHandler = () => {
 return {
 	<Page/>
 }
}

function App(){
	return (
    	<Router className= 'test'>
            <Switch>
            	<Route path="/test" component={middleHandler}/>
            </Switch>
        </Router>
    )
}

import queryString from 'query-string';

const Page = () => {
    const [code,setCode] = useState();
    const [search,setSearch] = userState();
    const query = queryString.parse(window.location.search);
    
    useEffect(() => {
    	setCode(query.code);
        setSearch(query.search);
    })
}

query-string을 사용해서. 넘어온 쿼리스트링을 파싱 했다.