오늘 공부한 내용
- SPA와 MPA
SPA가 등장하기 이전에는 웹사이트 내에서 페이지 이동을 할 때마다 페이지 전체를 불러와야 했고 만일 서버에 이상이 있는 경우 데이터가 불러와질 때까지 계속 기다려야 했다. 이로 인해 UX가 현저히 떨어지는 현상이 나타났다.
SPA가 등장한 이후로는 페이지 전체를 불러올 필요도 없어졌고 필요한 데이터만 업데이트 하면 되기 때문에 깜빡임도 줄어들고 서버 과부하 문제라든지 UX도 더 좋아졌다.
하지만 단점으로는 JS 파일의 크기가 크고, 서버에서 JS 파일을 불러오기 때문에 기다리는 동안에는 로딩 시간이 길어진다. 또한 SPA의 경우 빈 HTML 파일을 가져오기 때문에 SEO에 불리한 편이다.
이와 반대(?)되는 개념으로 MPA가 있는데 SEO에 대해서는 SPA 방식보다 유리한 편이나 페이지 전체를 reload하기 때문에 UX 측면으로는 좋지 않다.
React Router
React Router가 v6으로 업데이트 되면서(사실 좀 오래됨..) 컴포넌트 부분이 바뀌었다.
라우팅
우선 기존에는 Switch였던 것이 Routes로 변경되었다.
컴포넌트 전달
exact 옵션이 삭제가 되었고 컴포넌트 전달 시 component 대신 element로 전달한다.
BrowserRouter
웹 애플리케이션에서 History API를 이용해서 새로고침 없이도 웹 페이지 이동이 가능할 수 있게 해준다.
Routes,Route
경로 매칭을 해주는 역할을 하는 것으로, Routes 안에 Route를 감싸면 경로가 일치하는 단 하나의 라우터만 매칭시켜준다. 감싸지 않으면 매칭되는 모든 컴포넌트를 렌더링하므로 주의해야 한다.
Link
기존 자바스크립트의 경우에는 a 태그를 사용했고 이 경우에는 새로고침이 되는 문제가 있었지만
리액트에서 Link 태그를 사용하면 새로고침 없이 바로 페이지 이동이 가능하다. ReactDOM으로 렌더링하면 Link 컴포넌트는 a 태그로 바뀐다.
참고 자료
[React] react-router-dom v6 업그레이드 되면서 달라진 것들
웹 개발자가 알아두면 좋은 SPA, MPA
