[React] React의 탄생 이유

 

초기의 프론트엔드 개발

이전 인터넷은 상호작용하는 웹 애플리케이션이 아닌 문서를 보여주는 웹 문서를 주고 받는 것에 가까웠다. 바야흐로 HTML 웹 문서 시대. 애초에 HTML는 마크업 언어로 개발 언어도 아니었다. 그러나 인터넷 속도가 개선되고, Google Map이라는 혁신적인 앱이 등장함에 따라 Ajax라는 개념을 통해 웹 문서가 시시각각 변했다. Ajax(Async JavaScript and XML)는 JavaScript로 서버에서 데이터를 즉각적으로 받아올 수 있던게 큰 특징이다. 또한, 당시에는 jQuery를 많이 사용했다. 

이렇게 HTML 페이지를 일부 변경할 수 있게 되면서 브라우저 사이트 화면을 웹 페이지가 아닌 웹 애플리케이션이라고 부르기 시작했다. 

 

Angular의 등장

그러나 jQuery는 화면 변경에 어려움이 많았다. 예컨대 웹 페이지의 하나의 요소를 변경하려면 많은 부분을 바꿔야했던 것. 그래서 등장한게 two-way binding을 사용하는 Angular다. 

two-way binding은 일단 하나의 컴포넌트에 변경 사항을 모두 저장한 뒤 한번에 전달해주는 방식이다. 하지만 한계가 생긴다. 화면 하나만 놓고 보자면 two-way binding도 문제가 없지만, 오늘날 페이지가 어디 한 개 뿐인가. 어떤 웹 페이지에서 다크모드를 지원한다고 하자. 그러면 아마 모든 페이지의 다크 모드 변경시 달라지는 점을 적용해야 할텐데, 이러면 모든 페이지의 코드를 수정해야한다. 

또한, Angular는 프레임 워크 지향으로 다소 무거운 점이 있었다. 다른 라이브러리와 호환성 등의 문제가 있었으며 two-way binding은 복잡한 상태 관리에 적합하지 않았다. 

 

가벼운 React

React는 Angular에 비해 가벼웠고, 라이브러리를 지향한다. JS 객체에 가상으로 DOM을 구현한 Virtual DOM 기술. 만약 10가지의 변경 사항이 있다고 가정해보자. DOM으로 직접 모두 제어하여 변경하면 변경할 때 마다 repaint와 reflow가 일어나지만, VDOM으로 변경될 부분을 전부 골라두면 브라우저가 할 일을 최대한 줄일 수 있다. 또한, HTML과 비슷해 읽기 쉽지만 JS도 그래도 쓸 수 있는 JSX(JavaScript XML) 문법을 사용한다. 

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

 

시간이 지나면서 FE 개발자들은 HTML 파일을 한번만 보내고, 모든 내용을 Ajax에 요청 + DOM 조작으로만 페이지를 구성하여 전환하거나 변경하기 시작했다. (Sing Page Application) 

HTML 페이지에는 웹 페이지 정보가 모두 담겨있는데, SPA 같은 경우는 하나의 페이지 정보만 담고 있었다. 이것을 SEO라고 한다. 

하지만, 여러 페이지가 하나의 페이지로 구성되어 있기 때문에 검색 엔진(SEO)은 SPA를 index화 할 때 모든 페이지의 내용을 볼 수 없을 수 있다. 

예컨대, HTML을 먼저 보낸 후에 JS을 가져오기 때문에 이후 추가되는 정보를 검색하기 어려울 수 있으며 초기 로드시 메타 데이터 부재가 있을 수도 있다. 또한, 초기 로드 때 모든 것을 다 가져오므로 렌더링 속도에 문제가 있을 수 있다.

 

 

그래서 더 가볍게!

최근에는 React로 좀 더 체계적인 개발을 하려는 움직임이 있다. Next.js는 React 프레임워크를 지향한다. 특히 SSR에 강점을 보인다. 

SSR(Server Side Rendering)
기존 SPA는 클라이언트 측에서 HTML 등 파일을 로드했다. 그러면서 검색 엔진이 검색에 어려움이 있었다면, SSR은 서버 측에서 초기 렌더링을 수행해 클라이언트에게 전송하는 방식이다. 

CSR(Client Side Rendering)
우리가 어떤 웹 페이지에서 목록 창을 열었을 때 홈 화면에 있던 배너가 멈추지는 않는다. 즉, 목록 창에 커서를 가져다 대면서 변화가 생겼다고 해도 웹 문서(HTML)을 통째로 가져올 필요가 없다. 그래서 Ajax -> JS -> 서버로부터 JSON을 받아오고, 이 정보에 의해서 페이지를 일부만 변경하기 시작했다. 간단한 개발은 CSR을 많이 사용한다.