[React] React란 무엇인가? (feat. SPA와 Virtual DOM)

 

1. 리액트(React)란 무엇인가?

리액트(React)는 페이스북에서 제공하는 자바스크립트 라이브러리의 하나로서, 사용자 인터페이스를 만들기 위해 사용된다.

리액트는 컴포넌트 기반인데, 컴포넌트에 데이터를 흘려보내면 설게된 대로 UI가 조립되어 사용자에게 보여진다.

리액트는 이벤트로 인해 데이터를 관리하는 Model에 변화가 생기면Virtual DOM을 생성하고, 이것을 실제 DOM과 비교하고 변화가 발생한 부분만 업데이트 하는 방식으로 작동한다.

2. SPA 와 Virtual DOM

전통적인 웹사이트는 문서 하나에 전달되는 파일의 용량이 적었기 때문에, 한번의 이벤트에 새로운 페이지를 서버에서 전송해주는 방식도 상관이 없었다. 하지만 점치 웹사이트가 고도화됨에 따라 한 페이지에 해당하는 용랴잉 커졌고, 매번 새로운 페이지를 전달하는게 비효율적이 되었다.

이러한 문제를 해결하기 위한게 SPA(Single Page Application)이다. SPA란 어떤 웹사이트의 전체 페이지를 하나의 페이지에 담에 동적으로 화면을 바꿔가며 표현하는 것이다. 즉, 어떤 이벤트가 일어나면 최소한의 요소만 변경이 일어난다.

이러한 SPA를 잘 구현하기 위한 라이브러리가 React이다. 

하지만 복잡한 SPA에서는 DOM조작이 많이 발생한다. 이벤트가 일어날 때마다 브라우저가 연상르해야 하므로 전체적인 프로세스가 비효율적이 된다.

그래서 React는 Virtual DOM을 사용한다. 리액트는 Virtual DOM을 사용하여 실제 DOM에 적용시키기 전에  가상의 DOM을 만들어 적용시키고, 최종  완성된 결과만을 실제 DOM에 전달한다. 이를통해 브라우저가 진행하는 연산의 양을 줄일 수 있어서 성능이 개선되고, Virtual DOM은 렌더링도 되지 않기 때문에 연산비용이 적다. 

React는 모든 변화를 Virtual DOM을 통해 묶고 이를 실제 DOM으로 전달하는 방식으로 동작한다.

3. 리액트의 특징

• Flux 패턴과 단방향 데이터 바인딩
  React는 양방향 바인딩이 전제되는 MVC 패턴과는 다른 특징을 보인다. 페이스북에서 Flux라고 부르는 패턴이 적용되어 있는데, 단방향 바인딩이 특징이다.
  
  
• Component 기반 구조
  React는 UI를 여러 컴포넌트(Component)로 쪼개서 만든다. 한 페이지 안에서도 각 구역들을 독립된 컴포넌트로 만들고, 그 컴포넌트들을 조립해 화면을  구성하는 것이다.
  이러한 컴포넌트구조는 React의 큰 장점인데, 여러 화면에서 재사용되는 코드를 반복해 입력할 필요 없이 컴포넌트만 import해서 사용하면 되기 때문이다.
  또한, 기능단위와 UI단위로 쪼개서 코드를 관리하므로, 어플리케이션이 복잡해져도 코드의 유지보수가 용이하다.
• JSX 문법
  JSX는 과거 페이스북이 PHP를 개량해 만들었던 XHP에 기원을 두고 있는 새로운 자바스크립트 문법이다. React는 JSX로 짜여진다. HTML과 비슷한 모습의 JSX는 컴포넌트 렌더링을 구조화하는 방법을 제공한다. JSx문법은 리액트에 선현형 Declarative라는 성격을 부여해준다.