리액트의 탄생 배경

• 프레임워크가 없던 시절에는 정적인 페이지를 제공하는 HTML 페이지를 동적으로 렌더링 하려면 Vanilla Javascript를 사용해야 했다. 그러나 웹사이트 규모가 커질수록 기존 데이터의 변경이 빈번하게 발생하면 웹사이트는 바뀐 부분을 탐색하기 위해 처음부터 DOM 트리를 탐색하고 css를 다시 연산하고 레이아웃을 구성하고 페이지를 다시 리페인트 하는 작업을 한다. DOM을 조작할 때마다 웹브라우저 엔진이 웹페이지를 새로 그리기 때문에 업데이트가 너무 잦으면 웹사이트 성능이 저하될 수 있다.
• 페이스북 개발 팀에서 기존 잦은 DOM 트리 렌더링으로 웹사이트 성능 저하를 해결하고 편리한 UX를 제공하면서 구현하고자 개발한 것이 리액트 이다.

---

리액트의 동작원리

초기 렌더링

• 리액트 뿐만 아니라, 어떤 프레임워크든 처음 UI를 보여주기 위해서는 맨 처음 어떻게 보일지 초기 렌더링 작업이 필요하다. 리액트에서는 이를 담당하는 render 라는 함수가 있다. React에서의 render 함수는React.Component 클래스에서 제공되는 함수이며, 컴포넌트 클래스의 인스턴스가 render 함수를 호출할 때 렌더링된 결과물을 반환한다.

import React from 'react';
import { LoginPage } from './components/LoginPage';

const App = () => {
	return (
		<div className="App">
			<LoginPage />      
      	</div>
    );
}

위와 같이 App 컴포넌트가 LoginPage 라는 컴포넌트를 반환하고 있다.

ReactDOM.render(App, document.getElementById('root'));

위는 index.js 에 있는 render 함수이다. 첫 번째 인자로 App 컴포넌트 함수가 들어가있다. 여기서 ReactDOM.render 함수는 App 컴포넌트 함수를 호출하고, 그 결과물을 document.getElementById('root') 요소에 렌더링한다. 이 때 App 컴포넌트 함수에서 반환된 JSX가 render 함수를 호출한 결과물에 해당하게 된다.

조화 과정(UI 업데이트)

• 리액트의 화면이 바뀌면 사용자 입장에서는 페이지가 바뀌는 것처럼 보이겠지만, 실제로는 변화된 데이터에 따라 새로운 요소로 갈아끼워지는 것이다. 이를 리액트에서는 조화과정, 그리고 개발자들 사이에선 일반적으로 UI 업데이트, 리렌더링 이라고 불린다.

• 리액트에서는 초기 렌더링을 위해 먼저 render 함수를 호출한다. 그리고 컴포넌트 내의 데이터 변경이 일어나면 새로운 데이터로 다시 render 함수를 호출한다. 그렇게 되면 기존 Vanilla Javascript와 뭐가 다른 것일까...🤔

→ render 함수를 호출하고 바로 실제 DOM에 반영하는 것이 아니고 리액트에서는 vitrual DOM을 사용한다고 한다!

가상돔(virtual DOM)

• 가상돔은 실제 DOM 트리를 추상화 한 DOM이다. 쉽게 말해서 복사본이다! 만약 바뀐 UI를 바로바로 실제 DOM에 반영한다면, 기존에 있던 DOM을 지우고 리렌더링 하기 때문에 앞서 말한 것 처럼 css 연산, 레이아웃 구성 그리고 페이지를 다시 리페인팅 하기 때문에 웹사이트의 성능이 저하될 수 있다. 이 문제를 해결하기 위해 나온 것이 가상돔이다. 바뀐 데이터 및 UI를 브라우저에 렌더링 하려면 DOM을 안 건드리고는 불가능한 일이다. 그래서 가상돔에 먼저 바뀐 부분을 업데이트하고 그것을 실제 DOM과 비교하여 바뀐 부분만 리렌더링 되게 한다!

이것이 리액트가 가진 가장 큰 장점이다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 DOM에 적용

프레임워크 vs 라이브러리

리액트는 프레임워크다?

• 일부 웹 프레임워크가 MVC, MVW 같은 디자인 패턴 구조를 지향하는 것과 달리 리액트는 오직 뷰만 담당한다. 그래서 기타 기능은 직접 구현해서 사용하거나 라이브러리를 사용해야한다.

  그래서 리액트는 프레임워크 보다는 라이브러리에 가깝다.

느낀 점

• 블로그 작성 전, 리액트로 짠 코드들을 둘러보았었다.
  기존 Vanilla Javascript와 다르게 데이터의 흐름이 더욱 더 직관적으로 보였다.
  예를 들면 props 객체로 사용할 데이터를 해당 컴포넌트 함수에 넘긴다.
  그리고 모듈방식으로 코드를 짜는 것이 정말 편할 것 같다.

더 공부해봐야 알겠지만 확실히 순수 자바스크립트로 진행한 프로젝트보다 리액트를 사용하여 진행한 프로젝트가 더 깔끔할 것 같은 기분이 든다.