리액트를 왜 사용하는가,서버사이드 렌더링(CSR),클라이언트사이드 렌더링(SSR),코드분할
페이지,웹사이트를 만드는 방법에는 여러가지가 있다
html과 css를 사용하며 페이지를 구성, 거기에 JS를 사용하여 동적인 요소를 추가
이를 AJAX라고 한다
이것만으로도 우리가 만들고자 하는 웹사이트를 충분히 만들 수 있다
그런데 React를 왜 사용하는 것이며, 많은 사람들이 그렇게 배우고 열광하는 것일까?
<이 글은 '유튜버 드림코딩 by 엘리' 님의 서버사이드렌더링의 자료를 기반으로 작성하였습니다 (꾸벅)>
1. React를 사용하게 된 배경
1. 1990년대 중반까지는 웹 페이지가 Static Sites였다
2. 서버에 이미 잘 만들어진 HTML문서들이 있고
3. 사용자가 브라우저에서 해당 주소로 접속하면
4. 서버에 이미 배포되어져 있는 HTML문서를 받아오는 형식
단점: 페이지 내에서 다른 링크를 클릭하면, 서버에서 해당 HTML파일을 받아와서 페이지 전체를 다시 업데이트 해야한다
1. 웹페이지 전체를 불어오는 것이 아니라 필요한 부분만 업데이트 하기 위해 생긴게 fetch API의 원조라고 할 수 있는 XMLHttpRequest
2. HTML전체가 아니라 JSON과 같은 포멧으로 서버에서 가볍게 필요한 데이터만 받아온다
3. 그 데이터를 자바스크립트를 이용해서 동적으로 HTML을 생성해서 필요한 부분만 업데이트 한다
4. 나중에 이런 방식을 공식적으로 AJAX라는 이름으로 부르게 되었다
이러한 배경과 자바스크립트의 표준화로 인해 강력한 커뮤니티가 생기게 되었고 React라는 프레임워크가 생겼다
React는 CSR(Client Side Rendering) 체제 기반의 프레임워크이다
CSR이란 쉽게 말해서 클라이언트에서 다 해먹는 것!!!
1.서버에서 index.html라는 파일을 클라이언트에 보내준다
2.일반적으로 react에서 index.html의 body안에는 id root만 달랑 들어있고, 어플리케이션에서 필요한 자바스크립트 파일 링크만 있다
3.그래서 유저가 처음 접속할 때 빈 HTML파일 때문에 빈 화면이 보인다
4.그 이후에 필요한 자바스크립트 파일을 불러온다
5.필요한 자바스크립트 파일을 불러와야만 그제서야 첫번째 화면이 보인다
단점: 필요한 자바스크립트 파일의 용량이 크다면 불러오는데 더 오랜 시간이 걸린다
CSR의 단점을 보완하기 위해 만들어진 것이 SSR(Server Side Rendering)
1.1990년대 사용했던 Static Sites에서 영감을 받아서 SSR이 만들어짐
2.CSR처럼 클라이언트에서 모든것을 처리하는 방식과는 다르게, 서버에서 사용하는 모든 데이터를 가져와서 HTML파일을 만들게 되고,
잘 만들어진 HTML파일을 동적으로 구현할 수 있는 JS파일도 클라이언트에게 보내준다
3. 그러면 클라이언트는 잘 만들어진 HTML파일을 바로 사용자에게 보여주기 때문에 첫 페이지 로딩 시간이 짧다
하지만 역시 단점이 있다
1.Static Sites처럼 페이지 전체를 다시 로딩하는 것이기 때문에 안좋다
2.서버에 과부하가 걸리기 쉽다
3.그 이유는 사용자가 클릭을 할 때마다 클라이언트가 서버에 요청해서 해당 HTML파일을 계속 새로 불러와야 하기 때문이다
4.가장 치명적인 것은 HTML파일을 처음에 보여주었을 때 아직 페이지를 동적으로 처리하는 JS파일을 불러오지 못한 상황이기 때문에 클릭을 해도 클릭이 안되는 현상이 발생한다
이러한 현상을 이해하기 위해 TTV,TTI라는 개념을 아는것이 좋다
TTV는 웹 페이지가 보여지기 까지 걸리는 시간
TTI는 웹 페이지에서 어떤 버튼을 눌렀을 때 그 Interaction이 일어나기 까지 걸리는 시간이다
CSR
(1) 서버에 접속하게 되면 서버에게서 인덱스 파일을 받아오고
(2) 이 인덱스 파일은 비어있기 때문에 첫 화면이 안보이고
(3) 인덱스 파일에 링크되어있는 자바스크립트 파일을 찾아서 가져와야 하고
(4) 자바스크립트 파일을 받아오게 되면 이 순간부터 페이지가 보이고 클릭이 가능하다
즉 TTV와 함께 TTI가 동시에 가능하다
(사용자가 웹사이트를 볼 수 있음과 동시에 클릭이 가능하다)
SSR
(1)서버에 접속하게 되면 이미 잘 만들어진 인덱스 파일을 받아오게 되고 첫 화면이 바로 보인다
(2) 하지만 아직 동적으로 제어할 수 있는 자바스크립트 파일을 받아오지 않았으므로 클릭을 해도 interaction이 일어나지 않는다
(3) 자바스크립트 파일을 받아와야 interaction이 가능하다
TTV과 TTI사이에 공백이 있는 것이다
우리가 사용하는 React는 CSR을 지원하는 프레임 워크이며
CSR의 단점인 첫 번째 페이지 로딩이 오래 걸리는 현상을 해결하기 위해서는
우리가 최종적으로 번들링해서 사용자에게 보여주는 자바스크립트 파일을 어떻게 효율적으로 분할해서
첫 번째로 사용자가 보기위해서 필요한 정말 필수적인 것만 보낼 수 있을지 고민해보아야 한다
2. 코드분할
유저가 처음 접속했을 때 빌드된 App.js파일을 접속한다고 생각해보자
프로젝트가 커진다면 App.js파일 또한 커질것이고 용량이 커질 수 록 사용자가
첫번째 화면을 보는 시간은 늦어질 것이다
그래서 App.js파일을 효율적으로 분할해서 나누는 작업을 코드 분할이라고 한다
코드 분할을 위해서는 bundler가 설치 되어 있어야 한다
Bundler라는 것은 간단하게 말해서 여러개의 나누어져있는 파일을 하나의 파일로 만들어주는 라이브러리를 말한다
대표적으로 webpack이 있다
Create react app을 했다면 기본적으로 webpack이 설치되어 있다
코드분할을 하는 가장 좋은 방법은 import 문법을 사용하는 것이라고 공식문서에 나와있다
사용자가 클릭을 했을 때 클릭이라는 경고창을 띄우는 것을 예로 들어보자
(1) App.js파일에 클릭 메소드를 만들고
handleClick을 했을 때
그 메소드를 불러와서 사용하는 것으로 App.js파일이 구성되어있는 것보다는
(2) Click이라는 동작을 수행하는 컴포넌틀를 따로 파일로
코드 분할을 하고
import로 사용할 때만 App.js에서 그것을 불러오면
App.js파일이 좀더 가벼워 지기 때문에
초기 렌더링 시간을 줄일 수 있다
이런식으로 초기 렌더링 시간을 줄이는 것이 CSR의 단점을 보완하는 방식이다
3. 정리
1. 우리가 리액트를 사용하는 이유는 프로젝트가 커졌을 때, 여러개의 DOM을 유지,관리하는 것이 굉장히 번거롭고 어려움으로 컴포넌트 단위로 기능개발에만 집중하기 위해서 이다
2. 리액트를 사용해서 CSR방식으로 웹페이지를 구성할 때 신경써야 하는 점
(1)기능과 로직을 컴포넌트 단위로 잘게 잘라서 구성하기
<장점>
1. 코드가 읽기 쉬워서 유지보수할 때 원인을 빠르게 찾을 수 있다
2. 기능과 로직이 하나의 컴포넌트안에 포함되어 있으면 기능과 로직이 강하게 얽혀있어서 재활용이 어렵다
기능과 로직을 각각의 컴포넌트로 만든다면 재활용성이 높아진다
3. CSR기반인 리액트의 첫페이지 로딩이 느리다는 단점을 커버하는 것이 중요하다
<방법>
1. bundler를 이용해서 파일을 효율적으로 분할하는, 코드분할에 신경써야한다
2. 코드분할이 잘된다면 가장 먼저 유저에게 보여지는 main.js파일이 가벼워 지기 때문에 첫 화면이 늦게 보여지는 문제점을 최소화 할 수 있다
<이 글은 '유튜버 드림코딩 by 엘리' 님의 서버사이드렌더링의 자료를 기반으로 작성하였습니다 (꾸벅)>