React Router Dom 이란
React는 SPA 방식이지만 MPA 방식으로 만들어 주는것이다.
말그대로 REACT 로 생성된 SPA에서 페이지 이동이 가능하도록 만들어준다.
여기서 잠깐 !! SPA 는 한페이지에서 모든 걸 렌더링 해주는것이라 보면된다
먼저 설치부터
터미널에서
npm i react-router-dom 을 해주자 그리고 나서 package.json에서
확인쓰 이렇게 써있다면 설치 오케이
그리고나서 간단한 레이아웃을만들자 우선 수기로 임포트하자
위에
Import {BrowserRouter, Route,Routes} from "react-router-dom"을작성하고 간단한 레이아웃을 만들자
먼저 BrowserRouter 안에 Routes 그다음 안에 Route형식으로 넣어준다
그리고나서 이번엔 구분하기 좋게 components 폴더가 아닌 pages 폴더를 만들어서
안에 main.jsx와 detail.jsx 를 만들어준다 (이것은 규칙인데 컴포넌트를 만들때는 대문자
랜딩할 페이지를 만들때는 소문자로 구분한다)
그리고 기본경로
path="/" element={<Main/>}다음으로 동적 페이지 경로이다. 동적페이지는 우리가 한 웹사이트를 만들게되면
접속하는 유저의 계정을 가입할때마다 페이지를 생성하게 되면 엄청나게 비효율 적일것이다
그럴때 동적으로 생성할수있는 페이지를 만든다. 그게 바로 동적라우팅이다.
pathe="/:id" element={<Detail/>}
지금처럼 페이지를 보면 다른 우리가 기존에 보던 웹사이트처럼 버튼을 클릭해서
페이지를 이동하는게아닌 지금은 주소에 경로를 직접 입력해서 보고있다 .
그리고 지금 동적라우팅을 사용한 detail페이지는 뒤에 어떠한 숫자를 입력해도
페이지를 로딩한다.
먼저 버튼을 눌러 이동하는걸 구현해보자
그건 바로 페이지를 만들때
link to="/" "" 안에 이동할 페이지를 작성해준다.똑같이 bap과 da와 di 라는 페이지를 만들어 각자 색상을 다르게해 테스트해보자
App.jsx
Main.jsx
메인 페이지에
bap da di 를 링크로 만들고 각각 bap da di 페이지를 색상을 다르게 적용해
테스트 해보자
ui가 전혀 클릭하고싶게 생기지 않았지만 .. 클릭해보면 각 페이지로 이동한다 ..
마지막으로
새로운 HOOK useParams를 사용해보자
useParams도 React에서 제공하는 Hook중에 하나다.
useParams는 각각 동적라우팅 으로 값을 메긴 페이지를 가져오는 hook이다
문법은
const {} = useParams(); 이다 그리고 위에 import를 절대 잊으면 안된다.
아래에 Detail 경로를 위에 우리가 useParams를 사용향 userId 를
/detail/:userId요렇게 넣어준다.
detail/ userId 에 맞춰 동적 라우팅이 가능해진다.
