TIL 230206 - 191번(react Router)

이번 주는 일본여행을 다녀오느라 공부를 아예 못했다.
작업용 노트북이 없기도 했고 첫 해외 여행이라 들떠서 너무 많은 관광지를 돌려고 했더니 무지하게 피곤했다.
아무튼 다시 공부를 시작했고 늘어져버린 프로젝트를 얼른 다시 시작해야겠다.
휴식은 끝났고 3월 서울 입주 전까지 빡세게 해야지

react Router

버전 6.8을 쓰고 있는데 6버전에서 유용한 기능들을 한번 알아보자

1. Path Variable

• useParams
  상세 페이지를 구현할 때 어떤 페이지인지 알기 위해 경로에 변수를 받아야 한다.
  ex) diary/14 <-뒤의 14
  이것이 Path Varible이고 useParams를 이용해 가져올 수 있다.

<Route path="/diary/:id" element={<Diary />} />
  // path 부분 뒤에 /:id <-이렇게 :을 사용해 뒤에 있는 id라는 이름의 값을 전달하겠다는 선언
const {id} = useParams()
// 해당하는 컴포넌트에 가서 useParams를 사용해 객체로 받는다

2. Query String

• useSearchParams
  웹페이지에 데이터를 전달하는 가장 간단한 방법
  ex) /edit?id=10&mode=dark <- name과 value를 만들어 전달할 수 있다.
  이때 앞에서 이용한 Path Variable을 테스트 할 땐 페이지 라우팅에 영향을 줬는데 ?을 이용한 Query String은 페이지 라우팅에 영향을 주지 않는다고 보면 된다.

// /edit?id=10&mode=dark  ? 뒤 이러한 값들이 있고 해당하는 edit 컴포넌트로 이동한다.
  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get("id");
  const mode = searchParams.get("mode");
  console.log(id, mode); // 10 dark

이때 setSearchParams는 앞전에 썼던 useState의 set함수와 비슷한데 똑같이 뒤에 있는 쿼리 값을 직접적으로 변경할 수 있다.

3. Page Moving

• useNavigate
  link태그를 이용해서 이용해도 봤는데 똑같이 작동한다.

const navigate = useNavigate(); // 로 navigate를 선언한다.
// 이후 원하는 동작을 하고 싶은 컴포넌트에서 사용한다.
// 예를 들면 Home으로 돌아가고 싶은 버튼을 만든다면
<button onClick={() => navigate("/home")}>Home으로 가기</button>
// 클릭시 Home으로 이동

• 중요! navigate는 링크 태그를 클릭 안했을 때도 의도적으로 페이지를 바꿔버릴 수도 있다.(특히 로그인 유저인지 구분할 때 유용!)
• 뒤로가기는 -1을 앞으로 가려면 1을 인자로 주면 된다