[5일차] DO IT 리액트 프로그래밍 정석/p586 ~p 649/ 리액트 라우터, 비밀레시피

React Router

​

Router Props

​

브라우저와 리액트앱의 라우터를 연결하게 되면 그 결과 라우터가 history api에 접근할 수 있게 되며 각각의 Route와 연결된 컴포넌트에 props로 match, location, history라는 객체를 전달하게 된다.

​

Match

​

match 객체에는 <Route path>와 URL이 매칭된 대한 정보가 담겨져있다. 대표적으로 match.params로 path에 설정한 파라미터값을 가져올 수 있다.

​

· path : [string] 라우터에 정의된 path

· url : [string] 실제 클라이언트로부터 요청된 url path

· isExact : [boolean] true일 경우 전체 경로가 완전히 매칭될 경우에만 요청을 수행

· params : [JSON object] url path로 전달된 파라미터 객체

​

​

Location

​

location 객체에는 현재 페이지의 정보를 가지고 있다. 대표적으로 location.search로 현재 url의 쿼리 스트링을 가져올 수 있다.

​

· pathname : [string] 현재 페이지의 경로명

· search : [string] 현재 페이지의 query string

· hash : [string] 현재 페이지의 hash

​

​

History

​

history 객체는 브라우저의 history와 유사하다. 스택(stack)에 현재까지 이동한 url 경로들이 담겨있는 형태로 주소를 임의로 변경하거나 되돌아갈 수 있도록 해준다.

​

· length : [number] 전체 history 스택의 길이

· action : [string] 최근에 수행된 action (PUSH, REPLACE or POP)

· location : [JSON object] 최근 경로 정보

· push(path, [state]) : [function] 새로운 경로를 history 스택으로 푸시하여 페이지를 이동

· replace(path, [state]) : [function] 최근 경로를 history 스택에서 교체하여 페이지를 이동

· go(n) : [function] : history 스택의 포인터를 n번째로 이동

· goBack() : [function] 이전 페이지로 이동

· goForward() : [function] 앞 페이지로 이동

· block(prompt) : [function] history 스택의 PUSH/POP 동작을 제어

​

라우터 컴포넌트 종류	설명
BrowserRouter	HTML5를 지원하는 브라우저의 주소를 감지
HashRouter	해시 주소(http://localhost#login) 를 감지
MemoryRouter	메모리에 저장된 이전, 이후 주소로 이동시키는 라우터
NativeRouter	리액트 네이티브를 지원하는 라우터
StaticRouter	브라우저의 주소가 아닌 프로퍼티로 전달된 주소를 사용하는 라우터

 

 

1. GET 방식

​

GET은 어떠한 정보를 가져와서 조회하기 위해서 사용되는 방식

​

[ GET방식의 특징]

URL에 변수(데이터)를 포함시켜 요청한다.

​

데이터를 Header(헤더)에 포함하여 전송한다.

​

URL에 데이터가 노출되어 보안에 취약하다.

​

캐싱할 수 있다.

​

​

2. POST 방식

​

POST 방식은 데이터를 서버로 제출하여 추가 또는 수정하기 위해서 사용하는 방식

​

[ POST방식의 특징 ]

​

URL에 변수(데이터)를 노출하지 않고 요청한다.

​

데이터를 Body(바디)에 포함시킨다.

​

URL에 데이터가 노출되지 않아서 기본 보안은 되어있다.

​

캐싱할 수 없다.