솔직히 말하면 위코드에서 리액트를 처음 시작하게 되어 지금도 리액트를 공부하고있다
맨처음 시작할 때 페이스북에서 만들었고 가장많이 사용해서 공부하게 되었지만 부끄럽게도 아직까지 정확한 역사는 잘모른다
프론트엔드의 다른 프레임워크, 라이브러리도 궁금하기도해서 공부해본다
일단은 지금 배우고 사용하고있는 리액트 위주로!

SPA 라이브러리, 프레임워크가 왜 나오게 되었을까?

강력한 MVC (Model View Controller) 웹 프레임워크들이 등장하고 발전하면서 우리는 편리하고 빠르게 웹사이트를 개발할 수 있게 되었다

그런데 웹이 점점 발전하고 사용자 인터렉션이 많아지면서 기존 MVC 프레임워크는 다음과 같은 문제를 발생시켰다

고작 좋아요 버튼 하나 눌렀을 뿐인데 페이지가 다시 리로딩

• ➡ 사용자가 게시물 주소로 접속해왔을 때
  ➡ 서버는 아 사용자가 이 게시판의 게시글을 읽을려고하는구나
  ➡ 게시글을 DB에서 불러오고 좋아요수, 이전글, 사이트에서 기본적으로 보여지는 다른 내용들과 함께 이 데이터들을 HTML, CSS, Javascript로 작성해서 사용자의 브라우저에 보내준다
  ➡ 그래서 사용자가 이 게시판에 좋아요를 누르면
  ➡ 서버는 "아 사용자가 이 게시판의 이 게시물에 좋아요를 했구나" 하고 인식한 다음
  ➡ 해당 게시물의 사용자의 아이디로 좋아요를 추가하고
  ➡ 다시 DB에서 이 게시물 내용, 좋아요, 이전글, 다음글 등 다른 내용들과 함께 이 데이터들을 다시 HTML, CSS, Javascript로 작성해서 사용자의 브라우저에 보내준다
• 좋아요 하나 눌렀을 뿐인데 엄청난 소모가 발생한다
  만약 사이트에 기본적으로 로드할 정보들이나 이미지가 많으면?? 데이터 낭비가 발생하겠지
• 그래서 예전엔 사이트에서 뭐 하나만 고치려면 서버에서 페이지를 통째로 다시 불러와야 했다
  다행히 ajax라는 기술이 나와 http 통신으로 데이터를 전송하고 결과를 받아와서 사이트의 이 부분을 이렇게 변경하라고 자바스크립트로 명령을 줄 수 있게 되었다
  그런데 일일히 프로그래밍을 해야 했었다

모바일 시대가 열리면서

• 모바일 시대가 열리면서 어느정도 규모가 있는 기업들은 PC, 모바일, 안드로이드, 아이폰용 앱과 서버까지 개발해야 됐었다
• 반응형으로 만들지 않는다는 가정하에 위의 렌더링 과정을 똑같이 반복해야 했다 (PC, 모바일)
• 여기서 겹치는 부분들을 최소화할 순 없을까 하다가 안드로이드나 아이폰같은 경우는 자체적인 SW와 시스템이 있어서 서버로부터 데이터만 전송받으면 화면이 보여질 수 있었다
• 웹에서도 그게 가능하다면 즉 서버에서 데이터만 보내줘도 그걸 브라우저에서 HTML, CSS, JS로 렌더링해낼 수 있다면 이제 서버는 어디서 요청이 들어오든 동일한 작업을 수행해서 데이터를 전송받으면 될 것이다

그래서 서버 개발자들은 서버 개발에만 집중할 수 있게 되면서 웹개발은 사용자의 컴퓨터 브라우저에서 돌아가는 프론트엔드와 서버에서 돌아가는 백엔드로 분리되게 되었다

그런데 사실 웹사이트를 만들기 위해선, 프론트엔드 라이브러리, 프레임워크의 도움 없이도 만들어 낼 수 있다, 그리고 단순히 정적인 페이지를 만드는 것이라면 Javascript 없이도 그냥 HTML, CSS를 사용해서 만들 수 있다

그런데 요즘의 웹은 단순한 웹 페이지가 아니라, 웹 어플리케이션이다
브라우저만으로도 자연스러운 흐름으로 매우 많은 것들을 할 수가 있다

동적인 웹을 만들기 위해선 자바스크립트로 DOM에 접근하여 조작해야 한다
자바스크립트의 document.getElementById, jQuery의 $('#id') 같은 문법을 사용하여

그런데 프로젝트의 규모가 커지고, 정말 다양한 유저 인터페이스와 인터렉션을 제공하게 된다면 일일히 DOM 요소들을 직접 관리하고 코드로 정리하는건 힘든 일이 될 것이다

그래서
기존 서버에서 하던 일을 브라우저가 하기 위해,
사용자에게 다양한 유저 인터페이스와 인터렉션을 편하게 제공하기 위해,
DOM 관리와 상태 변화 관리를 최소화하고,
개발자는 오직 기능 개발, 사용자 인터페이스에 보다 집중할 수 있도록
브라우저에서도 동작하는 이 자바스크립트로 앵귤러, 뷰, 리액트같은 강력한 SPA 프레임워크, 라이브러리가 만들어지게 되었다

SPA란??
SPA (Single Page Application)은 종업원들이 고기를 가져다 주면(서버) 손님이 직접 고기를 구워먹는(클라이언트) 음식점이라고 생각하면 된다

서버는 정적 웹처럼 HTML, CSS, Javascript로 된 코드를 브라우저에 전송한다
여기서 전송된 Javascript는 주어진 데이터에 따라 HTML 웹페이지를 렌더링해낸다
기존 서버에서 하던 일을 이젠 사용자의 컴퓨터에서 브라우저가 해낸다

SPA는 서버에서 데이터를 받아와야 할 때마다 요청을 보내서 반환된 데이터로 다시 사이트를 갱신한다
이렇게 되면 어떤 기능이 수행될 때마다 화면이 다시 로드되는게 아니라, 한번 로드된 화면에서 많은 기능을 사용할 수 있게 된다

Angular, React, Vue

대표적인 SPA 프레임워크, 라이브러리인 Angular, React, Vue에 대해 간단히 살펴보면

Angular

• 구글에서 만들었다
• TypeScript로 매우 안정적이고 탄탄한 프론트엔드 앱을 만들 수 있다
• 상대적으로 무겁고 배우기 어렵다는 단점이 있다
• 프레임워크의 구조가 뚜렷하다 (슈퍼 MVW(Model-View-Whatever) 프레임워크라고 불림)
• 프로젝트 생성에서부터 코드 최적화 작업에 이르기 까지 모든 작업에서 사용할 수 있다
• 객체지향 프로그래밍을 할 수 있다

React

• 페이스북에서 만들었다
• 막강한 커뮤니티와 자료들을 갖추고있다
• 다른 설계들에 잘 녹아들기 때문에 유연함을 요구하는 서비스에 권장된다
  (어떠한 라이브러리라도 리액트에 잘 녹아 든다)
• 라이브러리의 특성을 갖는다

Vue

• 코드가 깔끔하고 배우기 쉬워 개발 과정에서 원하는 것을 정확하게 이용할 수 있다
• Angular, React에 비해 나중에 만들어졌는데 빠른 속도로 성장하고 있다
• pre-coding 구조를 가지고 있어서, 성능을 양보하지 않고도 어플리케이션을 빠르게 개발할 수 있게 해준다
• 대화 형 인터페이스 구축을 위한 직관적이고 신속하며 구성 가능한 MVVM이다

React의 특징

Component

Component는 UI를 구성하는 개별적인 View 단위이다

하나의 컴포넌트는 여러 부분에서 사용이 가능하다
예를 들어 웹 어클리케이션 여러 곳에서 버튼이 필요하다면, 공통된 하나의 버튼 컴포넌트를 생성하고, 그 컴포넌트를 필요한 곳에 가져다 사용하면 된다

이러한 특징은 생산성과 유지 보수를 용이하게 한다
하나의 요소의 변화가 다른 요소들의 변화에 미치는 복잡한 로직을 업데이트하는 경우, 컴포넌트 재사용 기능으로 보완할 수 있게 된다

JSX

JSX (Javascript + xml)은 자바스크립트에 대한 확장 구문으로서, 리액트에 element를 제공해준다
한마디로 아래 예시와 같이 자바스크립트 안의 HTML 문법을 쓸 수 있다고 보면 된다

import React from "react";

const App = () => {
  return (
    <div className="App">
      <p className="App-p">
        hello
      </p>
    </div>
  );
};

export default App;

위의 JSX 코드는 Babel로 컴파일해줘 브라우저가 읽을 수 있게 해준다

Virtual DOM

유저의 인터랙션에 의해 상태 변화가 일어나면 브라우저 작동 원리에 의해 다시 DOM에 HTML, CSS를 그려주는 렌더링 과정을 반복하게 된다

Virtual DOM은 이런 비효율성을 최소화하기 위해 탄생하게 되었으며,
리액트는 성공적으로 Virtual DOM 개념을 적용한 선발 주자라고 볼 수 있다

Virtual DOM의 작동 원리

유저 인터랙션에 의해 View에 변화가 발생하여 20개의 노드를 수정해주어야 한다면, 20번의 레이아웃 재계산, 20번의 리랜더링이 필요하다

Virtual DOM은 변화가 발생하면, 실제 DOM에 적용되기 전에 우선 Virtual DOM에 적용을 시킨다
그래서 기존의 DOM과 비교하여 어떤 변경 사항이 있는지 파악하여 최종적인 변화를 실제 DOM에 전달해 필요한 DOM트리만 업데이트할 수 있게 해준다

Virtual DOM은 랜더링 과정이 필요 없기 때문에 연산 비용이 실제 DOM보다 적기에 가능하다

리액트는

정말 자유도가 높은 라이브러리다
브라우저 주소 변경시 필요한 라우터 혹인 전역상태를 관리하는 기능들이 리액트 자체에 내장되어 있지 않다

많이 쓰이는 것이 라우터는 React-router, 상태 관리 라이브러리는 Redux, MobX 등의 라이브러리가 있다

리액트 컴포넌트 스타일링만해도 수많은 방식이 있다

그래서 여기서 장점은 가장 맘에드는 것을 사용하거나 직접 라이브러리를 만들어서 사용할 수 있고, 단점은 여러가지를 계속 시도해볼 필요가 있어 조금은 귀찮기도 할 것이다

실제로 직접 써보니 기능이 정말 많고 알아야될 것도 많고 어렵기도하고 또 재밌다
지금은 초보이지만 꾸준히 계속하면 언젠가는 정말 나도 고수가 될 날이 오지 않을까

참고
벨로퍼트님 리액트는 무엇인가
youthfulhps님 React를 사용하는 이유
얄코님 Angular, React, Vue가 뭔가요?