1. 라우팅이란?
- Url 주소에 따른 다른 화면을 보여주는 것
2. 정적 라우팅, 동적 라우팅
1. 정적라우팅
- 관리자가 직접 테이블에 라우트를 지정해주는 것
2. 동적라우팅
- 정해져있지 않고 관리를 따로해야되는 것
- Id값에 따라 다른 상세 페이지 정보가 들어가게 됨
- 변수처럼 다뤄야 할 필요성이 있다.
3. path parameter, query parameter
path parameter, query parameter 라는 두가지 개념이 있다.
path parameter : 한가지 리소스
query parameter : 전체 리소스에서 특정 한 곳을 찾아갈때 ? 뒤에 키워드
동적 라우팅이 구현되는 흐름
상품 클릭 -> 아이디 값을 받아서 url에 넘겨주고 -> url에 담겨있는 아이디를 이용해서 데이터를 fetch -> 요청된 데이터를 받아서 디테일 페이지에서 데이터를 뿌려준다.
1. path parameter 사용 예시
이벤트 발생 카드를 눌렀을때 onclick 이벤트 발생시켜야됨
-> useNavigate를 사용해서 이동
-> goToDetail 함수를 설정 (카드를 눌렀을 때 카드에 담긴 아이디값을 이용해서 디테일로 넘어가야된다)
-> ${props.id}
-> 라우터에서 해당 경로를 설정해줘야한다.
-> 라우터에 : id 를 수정
-> detail에서 아이디값에 따른 데이터를 가져와야된다.
-> useParams 사용 : url 패스파라미터의 값을 확인 가능
-> useEffect fetch함수 사용 API주소: url / ${params.id}
-> 데이터가 필요한 컴포넌트를 수정
2. query parameter 사용 방법
?뒤에 있는 것이 쿼리 스트링
pagination을 query parameter로 구현할 수 있다.
limit: 한페이지에 보여줄 데이터 수
offset: 데이터가 시작하는 위치
-query parameter를 사용할 때 useLocation 값이 필요하다.
