react-deep 3주차

React Router v4

• BrowserRouter, Route, Link

/intro 했을때 왜 Home도 렌더링됨?

경로에 루트도 포함되기 때문에 둘다 렌더링 됨
exact = {true} 해주면 확실히 그 경로에 접속했을 때만 렌더링 됨
Link : 네비게이션

• BrowserRouter는 기본적으로 감싸줘야 함
  - 오직 하나의 자식만을 가질 수 있음
• Route
  - path속성으로 경로 지정
  • children은 props 넘어오면 실제로 매칭이 되는지 확인해서 분기를 태워줌

URLPrameter Routing

• match 객체
  - 의 'path'에 정의한 것과 매치된 정보를 담고있음
• location 객체
  - URL을 다루기 쉽게 쪼개서 가지고 있음
  
• history 객체
  - 주소를 임의로 변경하거나 되돌아갈 수 있음
  - 주소를 변경하더라도 SPA 동작방식에 맞게 페이지 일부만 리로드
• switch
  • 매치되는 첫번째만 렌더링 됨
  • 404 페이지 만들 때 맨 마지막에 path지정 안하고 Route하면 됨
• Redirect
  • 리다이렉트 되게함
  • from 과 to 속성을 사용해서 redirect 해줄 수 있음(항상 Switch안에 있어야함)
• NavLink
  • active 스타일을 적용할 수 있는 Link태그
  • 스타일을 지정안하면 Link태그와 별반 다를게 없다.
  • exact...

Server-side-rendering

• SEO
  • 검색 엔진에서 자바스크립트를 해석해서 처리하지 않으므로, 크롤러에 대비해줘야 한다.
    - 구글은 자바스크립트로 랜더링 해서 크롤링한다.
• 초기 로드 시간 단축

SSR에서는 HTML에서 이미 js를 통해서 렌더링한 부분까지 만들어서 내려주기 때문에 처음 로드가 빠르다.

react-dom/server

• CSR

  • https://github.com/zeit/serve

• nginx

• expressjs

  Node에서 SSR도 함께 제공하기

• react-router를 이용한 SSR
  - 클라이언트
  - BrowserRouter
  - 서버
  - StaticRouter : 스트링으로 렌더링

  componentWillMount만 서버 렌더링에서 사용