서론 React를 사용하면서 페이지 이동에 가 아닌 Router를 사용해야하는 이유가 궁금해졌다. SPA란? React에서 Router를 사용하는 이유를 알기 위해선 먼저 SPA를 이해해야한다. SPA에 대한 이전 글 참고 SPA(Single Page Application)는 말 그대로 한개의 페이지로 이루어진 어플리케이션이라는 의미이다. SPA가 등장하기 전 웹 애플리케이션을 구성하던 방식인 서버 사이드 렌더링(SSR)방식의 경우, 화면에 보여질 리소스를 서버로 요청하고, 서버로 부터 받아온 리소스를 렌더링 했다. 를 통한 이동이 가능하다. 하지만, SPA의 경우 렌더링의 역할을 서버가 아니라 브라우저에서 처리하는 방식이다. 요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때 ..

CSR (Client Side Rendering) vs SSR (Server Side Rendering) 랜더링(Rendering - 화면에 데이터를 뿌려주는 행위)을 하는 주최에 따라 구분된다. CSR (Client Side Rendering) 클라이언트에서 렌더링이 일어남 CSR 동작 1. 유저(Client)가 서버(Server)에 요청을 보냄 2. HTML 파일과 JS를 서버에서 전송 3. 브라우저에서 HTML 파일과 JS 다운 4. 브라우저에서 프레임워크 실행 (TTV / TTI) TTV (Time To View- 사용자가 볼 수 있음) TTI (Time To Interact - 사용자가 클릭 등의 인터렉션 가능) CSR 장점 1. 컴포넌트 정의 및 재사용에 용이 2. Blinking (깜빡임) ..