ShockX | 2차 프로젝트 Part.2

이번 프로젝트를 하면서 useParams()와 useLocation()을 활용을 많이했었다.

useParams() 와 useLocation() 공식문서

클래스형에서는 match, location, history에 접근하려면 withRouter HOC로 감싸줘야했지만 useParams() hooks를 사용한다면 그럴 필요가 없었다.

마찬가지로 useLocation()이라는 hooks를 사용한다면 쉽게 location.search나, location.pathname에 접근할수 있다.

이번 프로젝트때 buy와 sell의 결제페이지를 컴포넌트 재사용을 활용해서 같은 js file로 만들었기때문에 모든 데이터 fetch와 렌더되는 내용들이 한 파일에서 일어났다. 그러므로 useParams와 useLocation을 이용하여 현재 어떤 페이지가 구현이 되야하는지를 함수들과 자식 컴포넌트들에게 전달했다.

예를들어, localhost:3000/order/sell 이라는 페이지에서 밑의 코드를 찍어본다면

useParam = useParams()
location = useLocation()
console.log(useParam)
console.log(location)

useParam 🍎

//Routes.js
  <Route exact path="/order/:id/" component={Payment} />

useParam 같은 경우 Routes에서 미리 지정을 해놓았었던 id가 나오고,

location 🍎

이렇게 localhost:3000 뒤에 어떤 pathname을 가지고 있는지가 뜬다.

이렇게 뜨는 정보들을 활용하여 order/뒤에 있는데 "buy"인지, "sell"인지를 감지하여 어떤 데이터를 fetch하고 컴포넌트들을 렌더 시킬지 조건을 걸었다. 또, 실제 데이터를 받아서 렌더할때는 url에 size=10 같은 query가 같이 오는데 location.search로 이 모든 query까지 받을수가 있다. 그렇게 해서 백앤드에게 해당 페이지의, 해당 상품의, 해당 size가 렌더되어야해~ 라고 fetch를 할때 밑의 코드처럼 useLocation()을 적극 활용했다.

 useEffect(() => {
    const sizeQuery = location.search;
    const pathnameQuery = location.pathname;
    if (useParam.id === "buy") {
      setIsBuy(0);
    } else {
      setIsBuy(1);
    }
    fetch(`${ORDERAPI}${pathnameQuery}${sizeQuery}`, {
      method: "GET",
      headers: {
        Authorization: localStorage.getItem("Kakao_token"),
      },
    })