React Router 리액트 라우터 용어해설(URL, Location, Location State, History Stack, CSR, History, Segment, Path Pattern, Dynamic Segment)

용어정리
Definitions

URL 주소창에 url, 많은 사람들이 URL과 route를 같은 의미로 사용하지만, URL은 React Router의 route가 아니다. 그것은 단지 URL일 뿐이다.

 

Location React Router의 특정 객체로 브라우저의 `window.location` 객체를 기반을 한다.

 

Location State URL로 인코딩되지 않은 로케이션에서 지속되는 변수. hash나 search params과 비슷하지만(URL에 인코딩된 데이터)와 다르게, 브라우저 메모리 속에 저장되서 보이지 않는다.

 

History Stack 유저가 네비게이트할때, 브라우저 스택 안에 저장하는 각 Location이다. 만약 브라우저 뒤로가기 버튼을 누르고 있으면, 저장된 스택을 확인할 수 있다.

 

Client Side Routing (CSR) HTML document끼리 링크할 수 있다. 그리고 브라우저 스스로 history stack을 핸들링 할 수 있다. CSR은 개발자가 서버에 요청 없이 브라우저의 history stack을 조작할 수 있게 한다.

 

History React Router가 URL 변경을 구독 수 있게 하는 객체. 브라우저의 history stack을 조작할 수 있는 API들도 제공한다.

 

History Action POP, PUSH, REPLACE 중 하나, 사용자는 이 중 하나를 사용해 URL에 도착한다.PUSH는 새 entry를 history stack에 추가하는 것이고(일반적으로 링크를 클릭하거나 프로그래머가 강제로 네비게이션해서), REPLACE는 비슷하지만, 현재의 entry를 스택에 넣는 것이 아니라 교체하는 것이다. 마지막으로 POP은 사용자가 뒤로가기를 누르거나 앞으로 가기 버튼을 브라우저에서 누를 때 발생한다.

 

Segment URL 중 일부 또는 '/' 와 문자열의 사이에 있는 Path pattern 이다. 예를 들어 "/users/123"는 2개의 Segments로 돼있다.

 

Path Pattern URL과 비슷하지만 특수문자를 가질 수 있다. dynamic segments(동적인 세그먼츠) (`"/users/:userId"`) 또는 별표 세그먼트(`"/docs/*"`). 이것들은 URL은 아니고, React Router가 매치하는 패턴이다.

 

Dynamic Segment Path Pattern을 동적으로 하는 의미는 어떤 값이든 새그먼트에서 매치할 수 있다는 것이다. 예를 들어 패턴이 `/users/:userId` 이면, `/user/123` 과 같은 URL들과 매치된다.

 

 

 

출처 : https://reactrouter.com/en/v6.3.0/getting-started/concepts

Main Concepts