React SPA

SPA (Single Page Application)

• 사용자와의 상호작용 과정에서 매번 html 문서 전체를 불러오는 것이 아닌, 필요한 부분만 javascript로 동적으로 렌더링하는 방식으로 만든 웹사이트/웹앱

장점

• 빠른 반응 속도
• 서버 과부하 문제 해결

단점

• javascript 파일이 무거워져서 첫 화면 로딩 속도가 느림
• html 요소가 적어서 SEO(검색 엔진 최적화)에 불리

라우팅

• 다른 경로(주소)에 따라 다른 화면을 보여주는 것
• react에서는 라우팅을 위해 React Router 라이브러리를 사용

React Router

• <Browser Router>: History API를 사용해 라우팅
• <Switch>: 여러 <Route> 중 경로가 일치하는 하나의 라우터만 렌더링
• <Route>: path 속성을 지정해 컴포넌트와 연결(link와 경로 일치 시 작동)
• <Link>: to 속성으로 링크 연결 (<a>태그로 렌더링됨)

---

참고:
-코드스테이츠 유어클래스