CRUD기능을 목표로 하는 첫 프로젝트를 React를 사용하여 진행하던 중 SPA에 대한 개념과 React-Route-Dom의 연관성이 있는 것 같아 정리하고자 한다.

SPA의 등장

필요한 데이터를 서버에서 전달받아 JavaScript가 동적으로 HTML 요소를 생성해서 화면을 보여주는 개발 방법

1. 장점

1. 어플리케이션과 사용자간의 실시간 상호작용이 일어나는데 이때 페이지 전체를 렌더링 하는 것이 아닌, 필요한 부분만 업데이트 하기 때문에 SPA는 사용자의 행동에 빠르게 반응할 수 있음.
2. 서버 과부하 문제도 현저히 줄일 수 있음, 보다 나은 사용자 경험 제공

   Youtube, facebook 그리고 지금 velog까지 React로 만들어져 있다.

2. 단점

1. 첫 화면의 로딩 시간이 길어진다.
   첫 화면 로딩시에 HTML 파일을 읽어들인 후 그 안에 있는 script tag안에 있는 JavaScript 파일을 다시 받아오는 과정을 거침, 대부분의 코드가 JavaScript 파일안에 들어있다보니, 무거워짐

2. 검색 엔진 최적화가 좋지 않음
   SPA는 HTML이 거의 비어있다 보니, 검색엔진이 일을 수행하기에 원할하지 않음.
   검색엔진 최적화에 대한 대응책을 따로 마련해야 하기에 개발의 복잡도가 더욱 늘어남

단점 2번은 아직 완전 쌩초보 개발자인 나에게는 잘 체감이 되진 않지만 후에 내가 작성한 코드를 리팩토링하며 최적화 할때는 꼭 신경써야 할 부분인 것 같다.

React Router Dom

1. SPA는 하나의 화면을 유저에게 보여주지만, 사실은 Route에 따라 다른 페이지를 보여주고 있다.

2. 주소에 따라 화면이 달라져서 "Routing"이라고 한다.

// 설치 방법
npm install react-router-dom
yarn add react-router-dom