[React] React의 탄생

리액트는 jQuery의 단점을 보완하며 SPA가 가능한 라이브러리로 주목받았다.

---

0. jQuery

---

더 쉽고 빠르게 jQuery

jQuery는 vanila보다 직관적으로 DOM을 제어할 수 있게 만들어준다.

 

much simpler with an easy-to-use

이 말에 걸맞게 jQuery는 js보다 훨씬 적은 양의 코드로 개발이 가능했다.

자연스레 동적 웹페이지에 관심이 쏠렸을무렵,

jQuery는 웹 생태계를 지배하게 됐다.

 

하지만 이런 jQuery는 적은 코드로만 개발이 가능할만큼 많은 패키지를 로드한다.

자연스레 성능이 떨어질 수 밖에 없으며, 컴포넌트나 모듈화도 사용하지 않아 유지보수가 쉽지 않다는 단점이 있었다.

 

이 때문에 Virtual DOM이라는 개념이 나오자 react에 왕좌를 물려주게 된다.

물론 여전히 많이 사용한다.

 

1. SPA

---

SPA(Single Page Application)는 단일 페이지로 된 웹 앱이다.

기존의 서버 사이드 렌더링(SSR)과 비교해 배포가 간단하며 모바일 웹에 최적화되어있다.

 

기존의 SSR은 화면에 보여질 리소스를 서버로 요청하고 해당 리소스를 렌더링했다.

(사진)

반면 SPA는 서버가 아닌 브라우저에서 렌더링을 모두 해결하는 방식이다.

SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 다운로드한다.

 

이후 새로운 요청이 들어오면 갱신에 필요한 데이터만 JSON으로 전달받는 방식이다.따라서 전체적인 트래픽이 감소하며, 좀 더 쾌적한 사용자 경험을 기대할 수 있다.

 

하지만 이런 특성상 초기 구동속도가 느린 편이다.

 

2. React

---

react가 현재 가장 핫한 라이브러리가 된 이유는 컴포넌트 기반으로 유지보수가 간단하며 SPA 역시 가능했기 때문이다.

 

react는 virtual DOM을 통한 접근 방식을 사용한다.