react-router-dom

router를 사용하면 주소창의 경로와 파라미터 정보를 조정하여 여러 페이지를 자유롭고 빠르게 이동할 수 있다. router에 대해 알아보기 이전에 url의 구조에 대해 알아보자.

예시로 티스토리의 url구조를 살펴보면, 
https://daramsuz.tistory.com/manage/newpost?type=post&returnURL=%2Fmanage%2Fposts%2F 에서 https는 프로토콜이다.
프로토콜이란, 클라이언트와 서버 사이에서 요청과 응답을 주고받을 수 있는 통신규칙으로 http와 https가 있는데
https가 보다 보안이 강화된 버전으로 일반 텍스트가 아니라 ssl이나 tcl로 암호화된 세션 데이터를 주고받는다. 
보안이 중요한 포털사이트, 은행, 카드 서비스 등에서 주로 사용한다. 티스토리도 htpps를 사용하고 있는 걸 알수있다.

기본 웹사이트의 주소(도메인) 이하부터는 경로를 표시한다. /manage 경로의 /newpost에 해당한다. 

라우트의 경로에 특정 값을 넣는 방법은 params와 query가 있다. 
params는 경로의 일부로 동적인 데이터를 포함한다. 

<BrowserRouter>
<Routes>
<Route path='/new/:id' element={<New/>}/>
</Routes>
</BrowserRouter>

/* New */

const {id} = useParams()
console.log(id)

먼저 params는 router를 설정할때 path의 경로 다음에 /:params 형식으로 설정할 수 있다.
또한 특정 경로 new다음으로 입력되는 params는 const {params} = useParams()로 구할 수 있다.

query는 페이지 라우팅을 원하는 컴포넌트에서 useSearchParams를 사용해서 쉽게 데이터를 얻거나 변경할 수 있다. 
쿼리 데이터를 얻기 위해서는 useSearchParams()를 사용하면 된다. 

//https://daramsuz.tistory.com/manage/newpost/?id=180
const [serachParams, setSearchParams] = useSearchParams()
const id = searchParams.get('id')
console.log(id) //180

query는 ? 다음에 오는 부분으로 쿼리 스트링이라고 하고, 페이지에 추가적인 데이터를 전달한다. 
쿼리스트링은 params와 달리 별도의 처리를 하지 않아도 자동으로 매핑된다.

버튼을 클릭하면 쿼리 스트링이 변경되게 할 수도 있다. 버튼을 누르면 id는 180에서 8000으로 변경된다.

<button onClick={()=>setSearchParmas({id:8000})}> 쿼리 스트링 변경 </button>

 

useNavigate는 간단하게 특정 라우터 페이지로 이동할 수 있는 react hook이다.
navigate에 경로를 입력해주면 된다. if문을 이용해 로그인되지 않은 사용자를 home으로 보내는 등에 사용할 수 있다.

const navigate = useNavigate()

...

<button onClick={()=>{navigate('/home')}}>네비게이트</button>
<button onClick={()=>{navigate(-1)}}>뒤로가기</button>

또한 특정 경로 이름이 아니라 숫자 -1를 넣어 뒤로가기 기능을 구현할 수도 있다.