[React] Suspense와 react router dom

 이번에는 React 공식 문서에서도 실험 단계? 인 Suspense와 react-router-dom에서 사용하는 내장 함수들을 사용해보았다. 각각의 특징들을 예시를 통해서 간단하게 정리해보았다.

사용 예시

    <Suspense fallback={로딩 화면 같은 예비 컨텐츠}>
      <Switch>
        <Route 
            path={접근할 PATH} 
            component={ lazy( () => import(`import할 PATH`))} 
                />
        <Redirect to={PATH} />
      </Switch>
    </Suspense>

Route

: Route는 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링 해주는 역할을 한다. 여기에 사용된 lazy 함수는 동적 import를 사용해서 컴포넌트를 렌더링 하는 기능을 담당한다. lazy는 Suspense 하위 컴포넌트에서 렌더링 되어야 한다. 그렇다면 Suspense는 뭘까?

Suspense

: Suspense는 데이터를 불러오기 위해서 사용된다. 공식 문서에 따르면 선언적으로 데이터를 비롯한 무엇이든 기다릴 수 있도록 해주는 기능을 해준다고 나와있다. 좀 더 자세하게 말하면 Suspense를 사용하는 것을 통해서 컴포넌트가 렌더링 되기 전까지 기다려준다. 예시에서와 같이 fallback 뒤에 기다리는 동안 보여줄 컨텐츠를 넣는다.

Switch

: Switch는 자식 컴포넌트 Route 또는 Redirect 중 매치되는 첫 번째 요소를 렌더링 한다. Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링 한다는 점을 보장해준다. 사용하지 않을 경우 매칭 되는 모두를 렌더링 한다.

Redirect

: 요청 경로를 다른 경로로 리다이렉션하는 기능을 한다.

BrowserRouter

: history API를 사용해 URL과 UI를 동기화하는 라우터이다.

Link

: 'a'태그와 비슷하다. to속성에 설정된 링크로 이동한다. 기록이 history 스택에 저장된다.