React.js

리액트는 웹과 네이티브 UI를 위한 라이브러리

'라이브러리'로서의 React

사실 React는 프레임워크가 아니라 라이브러리다! React만으로는 프레임워크로 불리기엔 제공해야 하는 기능들이 부족하다. 대신, 개발에 필요한 다양한 기능들을 자체 라이브러리가 아닌 서드파티 라이브러리(React-router-dom, Redux 등)에 의존하고 있다. 이 기능들이 React에 있었다면 프레임워크로 불릴 수 있었을지도?

React의 특징

• SPA Single Page Application

• 풍부한 생태계

• 다양한 활용
  웹 뿐만 아니라 UI가 필요한 곳이면 어디든 사용가능

SPA

SPA란?

하나의 페이지(=HTML)로 이루어진 애플리케이션. React, Vue, Angular 모두 SPA를 지원한다.

MPA와 SSR

MPA(Multi Page Application)는 SPA의 반대 개념으로, 2개 이상의 페이지로 구성된 애플리케이션이다.
SSR(Server Side Rendering)은 초기 화면 로딩 시 서버에서 완성된 HTML 파일을 브라우저에 전송하는 방식. 참고로 여기서 렌더링이란, HTML문서를 구성하는 데이터를 처리하고 이를 HTML 형태로 변환하여 HTML 문서 자체를 생성하는 과정을 말한다.
브라우저는 이 HTML문서를 받아 해석하고, 사용자가 보는 시각적인 요소들을 그리는 브라우저에서의 렌더링으로 이어진다.

전통적인 페이지 라이프사이클은 위 개념들을 이용한다. 브라우저는 단순히 서버에서 보내주는 HTML파일을 보여주는 것 뿐이었다. 그래서 단순히 페이지의 한 부분만 변하는 경우도 서버에서는 아예 다시 새로운 페이지를 만들어 브라우저에 전달한다. 그래서 전통적인 페이지들은 성능적으로 좋지 않았다. 이를 해결하기 위해 등장한 것이 SPA다.

SPA와 CSR

SPA는 처음 서버로부터 로드된 하나의 웹 페이지만 유지된다. 페이지에 변경사항이 생기면 필요한 데이터만을 json형태로 서버로부터 받아와 동적으로 내용을 변경한다.
이렇게 받아온 데이터를 기반으로 서버가 아닌 브라우저, 즉 클라이언트에서 렌더링하는 방식을 CSR(Client Side Rendering)이라 한다.

SPA의 라이프사이클에서 브라우저는 HTML파일을 보여주는 것 뿐만 아니라 서버로부터 받은 응답(=json 데이터)을 통해 페이지를 직접 재구성한다.

Routing

SPA가 하나의 페이지만을 갖는다면, 사용자가 어떻게 여러 페이지를 이동하는 것 처럼 보여질 수 있는 것일까? 이를 가능하게 하는 것이 라우팅 Routing이다.

Hashed Routing

Hashed Routing은 해시(#)를 기준으로 페이지를 라우팅하는 것을 말한다.
해시 이후의 값이 변경되면 그에 따라 페이지의 콘텐츠도 바뀌게 된다.

URL은 Fragment라는 해시를 기준으로 구별되는 영역을 마지막에 가질 수 있다. 하지만 서버에는 URL 중 해시 이전까지의 영역인 Path까지만 요청할 수 있다. 즉, 해시는 서버에는 요청이 가지 않고, 클라이언트에서만 사용하는 값이다.
window.location.hash를 통해 해시 값에 접근할 수 있는데, 이 값을 조작하여 해시 라우팅을 가능하게 만드는 것이다.

Browser Routing

그러나 현대 프론트엔드 SPA 웹에서는 해시 라이팅 기술이 많이 사용되지는 않는다.
www.sample-homepage.com/#about 보다는 www.sample-homepage.com/about의 형식을 많이 사용하는데, 이런 방식을 Browser Routing 이라 한다.
React는 UI 라이브러리이기 때문에 특정 라우팅 스타일을 강제하진 않는다. 다만, 사용자경험을 위해 Browser Routing 방식을 거의 채택한다.

Q. 그런데 Brower Routing의 형식은 Path까지의 URL을 사용하는 것 아닌가요? 그럼 페이지가 여러개가 되어버릴 텐데요?

A. 맞는 말이다! 하지만 React는 번들링 도구를 이용하여 Brower Routing을 사용하더라도 단 하나의 html만 요청할 수 있도록 내부적으로 처리하기 때문에 SPA가 가능하다.

npm & yarn

둘 모두 Node.js의 패키지 매니저다. 전세계의 많은 개발자들이 만든 유용하고 다양한 패키지들 또는 프로그램을 쉽게 설치하고 삭제할 수 있도록 도와준다.

yarn의 속도와 안정성이 npm보다 낫지만, 유의미할 정도는 아니다. 둘 모두 지속적으로 관리되고 있고 생태계가 풍부하기 때문에 무엇을 사용하든 상관없다.

React 프로젝트 생성

CRA Create React App

맨땅에서 React 프로젝트를 구성하려면 WebPack, babel, eslint 등 굉장히 많은 것들을 신경 써야한다. 그러나 CRA를 사용하면 명령 한 줄로 알아서 React 개발에 필수요소를 자동으로 구성해준다. 재료를 사는 것이 아닌 완제품을 사는 느낌이다!

Vite

프랑스어로 빠르다 라는 뜻. 원래 Vue 애플리케이션을 위해 만들어졌지만 현재는 React, Svelte 등 다양한 프레임워크와 라이브러리르 지원한다.

CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드 도구지만, WebPack을 사용하는 CRA와 달리 Vite는 Esbuild를 사용한다. ESbuild는 Go lang 베이스의 JS 빌드 툴로 WebPack과 비교할 수 없을 정도로 엄청난 수준(거의 120배)의 속도를 보여준다.

Vite는 빠른 콜드 스타트(차가운 상태에서 시동을 걸어 운행이 가능한 상태까지 걸리는 시간)와 HMR(Hot Module Replacement : 소스 코드를 수정했을 때 브라우저에 얼마나 빨리 반영되는가)을 지원한다.