라우팅팅

📌 오늘 진행 사항

📌 New 지식

1. useParams()

• ex) /diary/:id => /: 이하 부분이 path variable

1. useSearchPrams()

• ex) /edit?id=10&mode=dark => ? 이하 부분이 Query String

• state처럼 값을 받아 쓸 수 있음

- state처럼 배열의 비구조화 할당을 통해 값을 받는다.
    - searchParams : 데이터의 값
    - setSearchParams : 데이터를 변경시킬 수 있는 함수

const [searchParams, setSearchParams] = useSearchParams();

const id = searchParams.get('id');

const mode = searchParams.get('mode');

console.log("id :", id, "/ mode : ", mode);

• 페이지를 이동할 수 있는 함수를 반환

• 페이지를 이동하는 함수를 상수 navigate에 반환하기 때문에, navigate의 인자로 경로를 작성하게 되면 경로 이동됨

• navigate(-1) ⇒ 뒤로가기

    navigate('/search', {
      state: {
        title: title,
      },
    });

• useNavigate의 옵션으로 줬던 값을 가져오는 함수

  const location = useLocation();
  const { title } = location.state;

📌 문제 및 해결 사항

📌 모호하게 알고 넘어가는 것이 없나요? (Y/N)

📌 오늘 결정한 것들에 대해, 근거가 확실한가요? (Y/N)

📝 내일 희망 TODO