Develop/React.js

[React] url parameter, query string

dawonny 2022. 8. 10. 23:50
728x90
반응형

URL 파라미터

 

페이지를 여러개 만들고 싶을 때 URL 파라미터라는 문법을 사용한다.

path 를 써줄 때에

/detail/:내용

이런식으로 작명을 해주면 detail 뒤에 어느 문자가 와도 된다.

 

예를 들어 App.js에서

        <Route path="/detail/:id" element={<Detail shoes={shoes} />}></Route>

이렇게 사용하면 Detail 컴포넌트에서 id 라는 파라미터를 사용할 수 있다.

대신 Detail 컴포넌트에서 저 url 파라미터를 사용하려면 useParams 라는 걸 import 해와야한다.

 

useParams

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

function Detail(props) {
  let { id } = useParams();

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
}

export default Detail;

URL 파라미터를 shoes 데이터의 인덱스로 사용하는 모습이다.

 

근데 만약에 내가 shoes라는 state 를 다른 순서로 정렬을 해버린다면 문제가 생긴다.

1번째 상품을 눌렀는데 2번째 상품의 상세페이지가 나오는 등의 문제..

 

따라서 현재 url에 입력한 번호와 같은 id 번호를 가진 상품을 찾아서 데이터 바인딩을 하는 것이 좋을 듯 하다.

 

.find()

JS에는 .find() 라는 문법이 있다. 

이걸 쓰면 array 에서 원하는 항목만 찾을 수 있다.

응용해서 코드를 짜봤다.

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

function Detail(props) {
  let { id } = useParams();
  let item = props.shoes.find(function (x) {
    return x.id == id; //array자료의 id 와 url에 입력한 번호가 같은 경우(조건식)
  });

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{item.title}</h4>
          <p>{item.content}</p>
          <p>{item.price}원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
}

export default Detail;

props 로 받은 shoes state 의 id와 URL 파라미터로 입력한 id 가 같은 경우의 데이터를 찾아서 가져온다

그리고 그 데이터는 item 에 담긴다.

이 item 은 내가 찾는 props.shoes 의 데이터 한개가 되고

이 item의 title 이라던지 price 라던지를 출력하면 되겠다.

 

Query String

Query String 은 url에 데이터를 전달하는데 사용되는 일반적인 방법 중 하나이다.

Query String 은 url 의 끝에 ? 기호로 시작하고,

key=value 형식의 매개변수 쌍을 & 로 구분하여 나열한다.

예를 들어 다음과 같다.

/edit?id=10&mode=dark

이 전달받은 Query String 을 어떻게 처리할까?

useSearchParams 를 이용하면 된다.

 

useSearchParams

import React from "react";
import { useSearchParams } from "react-router-dom";

function Edit() {
    const [searchParams, setSearchParams] = useSearchParams();
    const id = searchParams.get("id");
    const mode = searchParams.get("mode");
    return (
        <div>
            <h1>이곳은 일기 수정 페이지 입니다</h1>
            <button
                onClick={() => {
                    setSearchParams({ who: "dawon" });
                }}
            >
                {" "}
                바꾸기{" "}
            </button>
        </div>
    );
}

export default Edit;

react-router-dom 에서 useSearchParams 를 받아와서

useState 를 사용하듯 배열에 변수를 담아주고,

직접 Query String 을 받아올 때에는 .get() 함수를 이용해서 받아온다.

 

여기서 setSearchParams 도 사용이 가능하다.

그 예시로 내가 setSearchParams 를 이용해서 Query String 을 바꾸는 버튼을 하나 만들어봤는데

이 버튼을 누르면 주소창에 보이는 Query String 의 값이 변한다.

⬇️

여기서 searchParams 와 setSearchParams 는 임의로 정한 이름이고, 다른 이름으로 바꿔도 상관은 없겠다.

 

 

728x90
반응형