[리액트를 다루는 기술] 16. react-router로 SPA 개발

1. SPA

- single page application

- 클라이언트는 서버에서 컴포넌트 파일을 받고 원하는 페이지를 서버로 다시 받는 것이 아니라  미리 제공 받은 컴포넌트에서 해결

-> 이 해결을 위해 라우터가 필요

2. 라우트 경로에 특정값을 넣는 방법 2가지

1) params를 사용

2) Querry string을 사용

1) params를 사용

-:key 형식으로 설정

<Route path='/About/:name' component={About}/>

- ?를 사용해서 선택적으로 입력할 수 있게 표시

<Route path='/About/:name?' component={About}/>

2) Querry string을 사용

~/About/Something?key=value&anotherKey=value

3. 페이지 이동

- a 태그를 사용하면 안됨

- 새로 고침하면서 이동하기 때문

- 라우터에 있는 link 컴포넌트를 이용해야함

4. 자바스크립트에서 라우팅

- link 컴포넌트는 클릭했을때 단순히 이동시키는 기능

- 라우트로 사용된 컴포넌트가 받아오는 props 중 하나의 history 객체인 push 함수를 활용

<button onClick={()=>{

history.push('/About/javascript')

5. 라우트 안에 라우트

page 379 ~ page 384 유실

6. match

- <Route> 컴포넌트에서 설정한 path와 관련된 데이터들을 조회할 때 사용

- 현재 URL이 같을지라도 다른 라우트에서 사용된 match는 다른 정보를 알려줌

7. history

- history는 현재 라우터를 조작할때 사용

- push와 replace 차이점

-> replace는 페이지 방문을 남기지 않아서 페이지 이동후 뒤로 가기 버튼을 눌렀을때, 방금 전이 아니라 전의 전 페이지 나옴

8. withRouter로 기타 컴포넌트에서 라우터 접근

- 라우트 내부 또는 외부 컴포넌트에서는 history, loaction, match 등 값을 사용할 수 없음

* Menu 컴포넌트 라우트 외부에 있기 때문에 위 3가지를 사용 못함

- withRouter를 이용하여 해당 props로 접근

page 387 ~ page 390 유실

9. 헷갈리는 값들

• location.pathname
• match.path
• match.url

1) location.pathname: 현재 브라우저 상의 위치를 알려줌, 어떤 라우트에서 하든 동일함

2)match: 설정한 라우트와 직접적인 관계있는 것만 보여줌

location.pathname: /posts/1

match.path: /posts/:id

match.url: /posts/1

"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"