React 기초 (SS, SPA, CSR, SSR)

블로그에 배운 순서대로 올리느라 중간 내용을 올리지 못했다. 이제 조금씩 중간 내용을 올리도록 하겠다.

 

React 왜 사용할까?
1. 빨라서

2. 편리해서

 

리액트는 모든 면에서 빠르고 편리할까? 그것을 알기 이해서는 SS와 SPA / CSR와 SSR을 이해해야 한다.
SS (Static Site) - 정적 사이트

 - HTML, CSS, JavaScript만으로 구성된 사이트 (그렇기 떄문에 데이터를 한꺼번에 요청하고 한꺼번에 응답한다)

 단점 : 새로고침할 때마다 해당 페이지에서 필요한 정보를 모두 다시 불러온다.

 장점 : 네트워크 트래픽으로는 우수(한 번에 보내기 때문에)하다.

 

SPA (Single Page Application)

 비슷한 데이터가 있는 경우, 중복된 데이터를 더 이상 불러올 필요가 없다.

 불러올 필요성이 있는 데이터만 불러오고, 필요성이 없는 데이터는 불러오지 않는다.

 그렇기 때문에 여러 개의 페이지가 한 개의 페이지처럼 동작한다.

 - 리액트 사용의 첫 번째 이유이다. (Component)

 

 

CSR (Client-Side Rendering)

 일반 PC와 다르게 서버 PC는 계속 켜져있어야 하고, 오류를 대비하기 때문에 일반 PC보다 사양이 높아야하고, 그로 인해 가격이 비싸다. 가정마다 PC가 있고 사양이 좋기 때문에 코드의 일부분을 사용자에게 줘서 구동되게 만든다.

 그렇기 때문에 클라이언트(고객)을 기준으로 렌더링(코드로 페이지 화면을 띄우는 형태)을 돌리게 되고, 클라이언트의 컴퓨터가 안 좋으면 들어올 수가 없다는 점이 단점으로 작용된다. 이는 CSR을 사용하는 리액트의 단점이기도 하다. 또, 완성이 안 된 코드를 클라이언트에게 전송하기 때문에 SEO 측면에서 불리하다.

 

SSR (Server-Side Rendering)

 이 경우는 클라이언트 중심으로 렌더링을 돌리는 방식과 반대로 서버 중심으로 렌더링을 돌리는 방식이다. 즉, 클라이언트보다 서버의 컴퓨터 사양이 좋을 때 사용하기 좋으며, 검색 엔진의 SEO 측면에서 유리하기 때문에 블로그나 뉴스같은 사이트에서 자주 사용한다. SSR을 사용하는 대표적인 예시로 React 기반인 Next.js와 Vue 기반인 Nuxt.js가 있다.

 

반응형

 

React의 특징으로는 가상 DOM(Document)을 사용하는데, 이는 리액트 코드로 표현을 하면 변경 사항을 감지해서 변경된 데이터만 최소한의 업데이트를 해서 빠르게 만든다.

 

또, SPA를 적용하며 Component로 구조화를 하기 때문에 편리성이 증대되며 재사용성이 좋아진다.