리액트가 뭔데요?
Act
- 명사 행동, 행위
- 동사 행동하다
Re: Act
- 다시 (—) 하다?
- (실제로 이런 문법은 없습니다)
Rendering
- 뷰를 보여주는 것
- 최초 실행한 ‘초기 렌더링’
- 다시 실행되는 ‘리렌더링’
리액트란 자바스크립트 UI라이브러리입니다.
라이브러리란?
프레임워크와 라이브러리는 제어를 누가 하느냐에 따라 달라집니다.
▶ 개발자는 라이브러리를 제어합니다.
이거 가져와! 이거 해! 너 나가!▶ 프레임워크는 개발자를 제어합니다.
문법 틀렸어! 런타임 에러났잖아! 내 말 들어 개발자!▶ 따라서 라이브러리의 법(규칙)은 개발자가 되고
개발자의 규칙은 프레임워크(의 문법)이 됩니다.
이런 점에서 리액트는 논쟁이 존재하지만
공식적으로는 라이브러리라고 정의하였습니다.▶ 기본적으로 CSR방식의 웹사이트를 개발하기 위해 개발되었습니다.
깜박임이슈를 개선하고 서버가 하는 일을 줄일 수 있습니다.
- 주로 Virtual DOM을 이용해 Ul의 변경할 부분만 빠르게 수정하기 위해 사용됩니다.
- UI들을 컴포넌트별로 구분하여 코드의 가독성과 재사용성을 높아진다는 큰 장점이 있습니다.
'리액트'의 단점
CSR방식이 가진 구조상의 문제가 있습니다.
▶ CSR이 서버에서 쏴주는 페이지
- 개발자 도구 → Network → Doc (HTML)
- 실제로 서버에 있는 HTML
- 우 하단의 비어있는 화면
- 클라이언트가 확인하게 되는 페이지
- main.chuck.js 에서 getElement 식으로 작성된 HTML
기본 HTML이 root와 JS호출밖에 없습니다.
검색엔진은 HTML의 시맨틱 태그를 기준으로 노출위치를 선정합니다.
- 태그가 없는 이 웹을 어디에 노출시켜야 하는지 판단하지 못합니다.
- SEO 최적화 이슈
JS를 받아 오고 HTML을 생성하는 긴 시간동안 Client는 빈 화면밖에 보지 못합니다.
- 초기 로딩 속도 이슈
이를 개선할 방법은 2가지 입니다.
▶ 첫째 로직을 개선
-
초기 로딩 속도와 SEO성능을 개선하는 것에 초점
-
전달받는 스크립트가 가진 핵심이 무엇인지 파악
code-splittingtree- shakingchunk 분리- 로딩해야 할 것 들을 줄일 수 있습니다. (로딩 소요 시간↓)
- 라이브러리나 webpack 등
- 사전에 렌더링된 HTML 을 보여줌으로써
- SEO를 개선
-
둘째, 목적에 맞게 렌더링 방식을 교체
- 웹사이트의 성격이
- SEO에 중점을 둬야한다면
- SSR 또는 SSG로 대체
- 동적인 렌더링과 SEO를 모두 갖춰야 한다면
- CSR과 SSR이 합쳐진 Universal App으로 개발
NEXT. JS를 활용
- 페이지별로 렌더링 방식을 지정
페이지가 작고 규모가 작은 서비스라면
- Gatsby.js를 사용
| CSR | SSR | |
|---|---|---|
| 장점 | 화면 깜빡임 ❌ / 초기 로딩 이후 구동속도가 빠름 / TTV와 TTI 사이 간극 ❌ / 서버 부하 분산 | 초기 구동속도가 빠름 / SEO에 유리함 |
| 단점 | 초기 로딩 속도가 느림 / SEO에 불리함 | 화면 깜빡임 / TTV와 TTI사이 간극이 있음 / 서버 부하가 있음 |
참고 링크
핵심 자료
프레임워크 vs 라이브러리
서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)
SSR과 CSR 이 영상 하나로 끝내기! (SEO 해결 포함)
부연 자료
어서 와, SSR은 처음이지? - 도입 편 - Naver D2
React - 나무위키
렌더링 / SSR / CSR / SPA - 나무위키
모두가 자주 사용하는 React 라이브러리 정리
[10분 테코톡] 🎨 신세한탄의 CSR&SSR
응 너만 몰라. 리액트 프레임워크 TOP 3
함수형프로그래밍이 대세다?! (함수형 vs 객체지향)
API란? 개념 정리와 포트폴리오에 유용한 대박 사이트 공유 🙌
import - MDN
인스타그램이 React Native로 앱을 만든 과정
2022년 필수 리액트 패턴 5가지 – ① Compound Component, Control Props, Custom Hook
React란? 특징과 장단점 파헤치기
