101124 TIL

 

 

 

 

 

 

useNavigate 

페이지를 이동할 수있게 도와주는 함수 

 

브라우저에서 뒤로가기 버튼을 누르거나  버튼을 눌러 다른 페이지로 이동하고 싶을 때 사용 

 

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/about')}>About 페이지로 이동</button>
  );
}

 

버튼을 클릭했을 때 /about  페이지로 이동한다 

 

 

useNavigate is a function that helps you move between pages 

 

---

 

useLocation 

 

현재페이지의 위치 정보를 가져오는 함수 

 

내가 지금 어떤 페이지에 있는 지 알려줌 

 

특정페이지에서 url 에 있는 정보고 가 필요할떄 사용한다 .

 

 

import { useLocation } from 'react-router-dom';

function ShowLocation() {
  const location = useLocation();

  return <p>현재 URL은 {location.pathname}입니다.</p>;
}

 

현제페이지에서 url 경로를 화면에 보여주는 코드 

 

/about 에 있으면 

 

현재 url 은 /about 입니다 

 

라고 나온다 

 

useLocation is a fucnction that gets the current page's location information 

 

 

---

쿼리스트링이란 ?  querystring 

 

url 끝에 붙는 추가적인 정보 , 

 

서버로 특정데이터를 전달할떄 사용 

 

쿼리스트링은 Url 끝에 ? 로 시작 , 그 뒤에는 키=값 

 

으로 데이터를 전달 

 

여러데이터를 전달 할때는 &로 구분 한다 

 

https://example.com/search?query=react&sort=asc

 

query=react  쿼리라는 키에 리액트라는 값을 전달 

 

sort=asc sort 라는 키에 asc 값을 전달 

---

 

useSearchParams 란 ?

 

리액트 라우터에서 쿼리 스트링을 처리하고 관리할떄 사용 하는 hook 이다 

 

이 Hook 을 통해서 컴포넌트 내에서 Url의 쿼리 파라미터를 쉽게 읽고 업데이트 할수있다 

 

useState 처럼 동작 하지만 . 상태가 브라우저의 Url 에 반영된다는 점에서 차이가 있음 .

 

useSearchParams : 현재 url의 쿼리 파라미터를 관리하는 객체 

 

setSearchParams : 쿼리 파라미터를 업데이트 하는 함수 

 

 

import { useSearchParams } from 'react-router-dom';

function MyComponent() {
  // searchParams는 쿼리 스트링을 관리하는 객체
  // setSearchParams는 쿼리 스트링을 업데이트하는 함수
  const [searchParams, setSearchParams] = useSearchParams();

  // 현재 URL의 특정 쿼리 값 가져오기
  const query = searchParams.get('query'); // 'react'가 반환됨

  // 쿼리 파라미터를 업데이트하기
  const updateQuery = () => {
    setSearchParams({ query: 'new-value', sort: 'desc' });
  };

  return (
    <div>
      <p>Current Query: {query}</p>
      <button onClick={updateQuery}>Update Query</button>
    </div>
  );
}

 

 

 

쿼리 파라미터 읽기:

 

searchParams.get('키'): 특정 쿼리 파라미터 값을 읽는다

 

예를 들어 ?query=react&sort=asc인 경우, searchParams.get('query')는 "react"를 반환한다 

 

쿼리 파라미터 업데이트:

setSearchParams({ 키1: 값1, 키2: 값2 }): URL의 쿼리 스트링을 업데이트, 이때 페이지가 리로드되지 않고, URL만 업데이트된다 

 

쿼리 파라미터 삭제:

setSearchParams({}): 모든 쿼리 파라미터를 삭제

 

useSearchParams와 관련된 장점

URL을 통한 상태 관리가 가능해, 특정 상태나 검색 결과 등을 사용자가 URL로 공유할 수 있다 

 

페이지를 새로고침하더라도 상태가 유지되므로, 더욱 직관적인 상태 관리를 할 수 있다 

 

useSearchParams는 React Router에서 URL의 쿼리 파라미터를 쉽게 읽고 업데이트할 수 있도록 돕는 유용한 도구

 

이를 활용하면 쿼리 스트링을 기반으로 하는 동적인 UI를 구현할 수 있으며, URL을 통한 상태 관리를 보다 쉽게 할 수 있다