React 입문 1 (SPA, CSR, SSR, 라이브러리)

React란 📖

UI를 만들기 위한 라이브러리입니다.

 

1. React가 라이브러리인 이유

프레임워크라고 불리기에는 제공해야 하는 기능이 부족하고 `상태관리(Redux)`, `라우팅(React-router-dom)` 등 개발자가 직접 제어하기 때문입니다.

 

 

프레임워크 vs 라이브러리📖

1. 프레임워크

개발자가 기능 구현에만 집중할 수 있게 애플리케이션의 구조 또는 틀을 제공하기 때문에 프레임워크가 정한 규칙과 구조 내에서 개발을 진행할 수 있습니다.

 

2. 라이브러리

라이브러리는 특정 기능을 수행하는 코드의 집합으로 필요에 따라 선택적으로 사용할 수 있습니다.

ex) `React.js` `react-router-dom` `redux`

 

3. 제어의 역전 (IoC)

개발 시 `제어`를 하는 것은 개발자의 역할인데 프레임워크를 사용하는 경우 시키는 대로 코드를 짜게 되면 프레임워크가 알아서 제어의 흐름을 가져가는 것입니다.

 

❗가장 큰 차이점 `누가 애플리케이션의 흐름을 제어하는가`에 있습니다.

 

 

특징 📖

1. SPA(Single Page Application)

아래에서 자세하게 다루도록 하겠습니다.

 

2. npm trends

npm에 등록된 패키지의 다운로드 수가 압도적으로 높습니다.

점유율

 

SPA란? 📖

한 개의 페이지로 이루어진 애플리케이션입니다. 대표적으로 `react`,`vue`,`angular`가 있습니다. 

SPA

 

최초의 서버로부터 로드된 이후 사용자와 상호작용에 따라 필요한 데이터만 바인딩해 동적으로 내용을 변경합니다.

 

CSR, SSR 📖

CSR (Client Side Rendering)

CSR은 클라이언트 측에서 렌더링 하는 방식입니다.

 

✨ 동작 과정

• 사용자가 웹 사이트를 방문하면, 브라우저가 서버에 콘텐츠(HTML, CSS, JS, 이미지 소스 등)를 요청
• 서버는 빈 뼈대 HTML을 응답
• 브라우저가 연결된 JS를 통해 서버로부터 다시 JS파일 다운
• JS를 통해 동적으로 페이지를 만들고 브라우저게 띄움

 

✅ 장단점

• 초기 로딩 속도는 느리지만 로딩이 된 이후 변경된 데이터만 바인딩 하는 방식으로 동작하기 때문에 이후엔 빠름
• 클라이언트 측에서 연산, 라우팅 등 모두 직접 처리하기 때문에 반응속도가 빠름
• 검색 엔진 최적화(SEO)에 불리함 (웹 크롤러는 HTML이 비어 있는 것처럼 보여서)

 

 

SSR (Server Side Rendering)

SSR은 서버 측에서 렌더링 하는 방식입니다. 

초기 화면 로딩 시 서버에서 완성된 HTML 페이지를 만들어 브라우저에게 전송하는 방식입니다. 

 

✨ 동작 과정

• 사용자가 웹 사이트를 방문하면, 브라우저가 서버에 콘텐츠(HTML, CSS, JS, 이미지 소스 등)를 요청
• 서버는 페이지에 필요한 데이터를 얻어와 css까지 모두 적용해 렌더링 준비를 마친 HTML, JS를 브라우저로 응답
• 브라우저에서 JS를 다운로드하고 HTML에 JS로직 연결

 

✅ 장단점

• 초기 페이지 로딩 속도가 빠르지만 이후엔 느림.
• 검색 엔진 최적화(SEO)에 유리함 (초기 HTML을 읽을 수 있기 때문에)

 

회고 🧐

리액트를 처음 사용할 땐 채용시장에서 필수로 요구되는 기술이기 때문에 무의식적으로 사용한 것 같습니다. 근데 어떠한 과정을 거쳐서 지금의 리액트가 됐는지 알고 사용하니까 모르고 사용하는 것 보다 낫다 라는 생각이 들었습니다.