2022/10/31 - TIL

리액터의 라우터의 원리 :

CSR (Client Side Rendering)

• 현재의 URL에 맞는 페이지를 렌더링
• 페이지의 리로드 없이 다른 페이지 이동
• 사용자의 페이지 이동을 감지하고 처리 가능

<BrowserRouter>

라우팅을 사용할 위치의 최상단에는 <BrowserRouter>가 감싸고 있어야 한다. <BrowserRouter>는<Router>를 렌더링 할 때 props로 history 객체를 전달하는데, 이 객체는 history 패키지의 createBrowserHistory() 함수를 호출함으로써 생성된다.

<Router>

마운트되는 순간에 props로 전달 받은 history 객체의 프로퍼티인 location 객체를 자신의 지역 상태로 저장한다. 그리고 props로 전달받은 history객체를 구독하고, 현재 URL이 변경될 때마다 자신의 지역 상태에 해당하는 location이 새로운 location으로 대체되도록 한다.

<Link>

Link는 다른 주소로 이동시키는 컴포넌트입니다. Route에서 a태그를 이용하면 페이지를 다시 로드하기 때문에 a태그가 아닌 Link를 사용하여 이동을 시켜야 합니다. Link의 To 속성은 문자열, 객체, 함수가 될 수 있습니다.

<Switch>

Switch 컴포넌트라우트를 쓸 때 path와 일치하는 경우 모두 렌더링한다. 하지만 switch는 현재 경로와 일치하는 단 하나만 렌더링이 진행된다

<NavLink>

NavLink 컴포넌트NavLink 컴포넌트는 Link 컴포넌트와 똑같지만 현재 URL과 일치하면 스타일을 지정할 수 있는 컴포넌트입니다.

리액트 라우터 맵(depth를 기준으로 나누었다. depth 안에 포함되었다고, 그 안에서 사용하는 것을 의미하는 것이 아니다)

• BrowserRouter
• Hash
  • Route
  • Switch
    • Lnk
    • NavLink
    • Redirect