개발나라 스용공주

이번 글은 동적경로의 종류와 사용법에 대한 글이다.이번 글의 예제와 연계된 실습 내용을 담은 글은 이번 글 맨 아래에 링크가 첨부되어있다. [ 동적 경로(Dynamic Segments) ]동적인 데이터를 포함하고 있는 경로로 페이지 링크가 아래 예시와 같이 변하면서 다른 페이지를 렌더링할 때 이를 동적경로라고 부른다.  [ 동적 경로의 종류 ]ex. '~/product/1' (1번 상품 페이지) , '~/product/2' (2번 상품 페이지)=> 이때 맨 뒤에 오는 숫자에 따라 렌더링하는 상품이 변경됨=> 1. URL Parameter : 위의 예시 방식으로 /(슬래쉬) 뒤에 아이템의 id를 명시(잘 변경되지 않는 아이템의 id 등의 값의 주소를 명시할 때 사용됨)  2. Query String : U..

이번 글은 페이지를 이동시키는 함수를 반환해주는 useNavigate()의 사용법에 대한 글이다. 이 블로그 포스팅과 연결되는 내용이다.https://hwangseoyoung.tistory.com/214 BrowserRouter : 브라우저의 현재 주소를 저장하고 감지하" data-og-host="hwangseoyoung.tistory.com" data-og-source-url="https://hwangseoyoung.tistory.com/214" data-og-url="https://hwangseoyoung.tistory.com/214" data-og-image="https://scrap.kakaocdn.net/dn/bJ1SH2/hyYCd7JCJa/BPZSbYCgSiZJ6zIEcX3oC1/img.png..

이번 글은 페이지를 이동시켜주는 라우트(Route)를 어떻게 사용하는지에 대한 글이다.  먼저 아래 코드와 같이 설정을 해준다. [ main.jsx ]=> BrowserRouter : 브라우저의 현재 주소를 저장하고 감지하는 역할import { BrowserRouter } from "react-router-dom"; App 컴포넌트를 감싸줌createRoot(document.getElementById("root")).render( ); BrowserRouter가 전체를 감싸고있음 [ Routes 컴포넌트 ]Routes 컴포넌트는 페이지를 이동할 때 사용하는 컴포넌트이다. ※ 이때 Routes 컴포넌트는 주의사항 2가지가 있다.첫번째는 안에는 만 들어가야 오류가 발생하지 않는다.그리고 두번째는..