React란?
React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다.
그러기에 이러한 웹 앱을 만드는 다른 Tool인 Vue나 Angualar와 많이 비교를 하게 된다.
처음 볼 수 있는 가장 큰 차이점은 프레임워크와 라이브러리의 차이이다. Angular와 Vue는 프레임워크이며 리액트는 라이브러리이다.
프레임워크? 라이브러리?
프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것.
소프트웨어에서의 프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합' 이라 할 수 있으며, 완성된 어플리케이션이 아닌 프로그래머가 완성시키는 작업을 해야 한다.
라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것.
단순 활용가능한 도구들의 집합을 말한다.
즉, 개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식을 취하고 있다.
이 위에 그림을 보면 프레임워크는 라이브러리를 포함하고 또한 우리가 작성한 소스코드를 호출한다. 그리고 소스코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출하게 된다.
React는 프레임워크? 라이브러리?
React는 라이브러리!
리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링 하는 데 관여하기 때문이다.
그리고 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용하며, 상태 관리를 위해서는 redux, mobx 등 여러 모듈을 사용하며, 빌드를 위해서는 webpack, npm 등등, 테스팅 을 위해서도 Eslint, Mocha 등을 이용하기 때문에 리액트는 프레임워크가 아닌 라이브러리이다.
React 컴포넌트
리액트는 여러 컴포넌트를 이용해서 웹 앱을 개발하게 된다. 여기서 컴포넌트는 무엇일까?
컴포넌트(Component) : 리액트로 만들어진 앱을 이루는 최소한의 단위
React는 여러 컴포넌트 조각으로 되어있다.
만약 하나의 페이지를 리액트로 만든다고 보면 아래 그림처럼 여러개의 컴포넌트가 모여서 하나의 페이지를 이루게 된다.
이 인스타그램 페이지를 보면 여러 개의 컴포넌트로 이루어져 있다.
검색, 프로필, 스토리, 포스트 컴포넌트 등으로 구성되어 있는데,
이렇게 컴포넌트가 여러 개로 나누어져 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있다.
또한 여러명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있다.
React 컴포넌트는 두 가지가 있다.
-클래스형 컴포넌트 (Class Components) 
-함수형 컴포넌트 (Functional Components)
원래 React로 개발할 때는 클래스형 컴포넌트를 이용해 많이 개발을 했으나,
React에서 React Hooks라는 것을 발표한 이후부터는 함수형 컴포넌트를 이용해 주로 개발한다.
브라우저가 그려지는 원리 및 가상 돔
React의 주요 특징 중 하나는 가상돔(Virtual DOM)을 사용한다는 것이다.
그럼 가상돔에 대해 알아봐야 하는데 우선 가상돔을 왜 사용하는지 알기 위해 브라우저가 렌더링하는 과정을 알아보자.
웹 페이지 빌드 과정(Critical Rendering Path CRP)
서버에서 HTML 문서를 브라우저에 전달하면, 브라우저가 문서에 따라 화면을 보여주는데
DOM tree 생성
렌더 엔진이 문서를 읽어들여서 그것 들을 파싱하고 어떤 내용을 페이지에 렌더링할 지 결정한다.
Render tree 생성
이 단계는 브라우저가 DOM과 CSSOM을 결합하는 곳이며, 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌 더링 트리를 출력한다. 즉 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함한다.
Layout (reflow)
이 단계는 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계이다.
Paint
실제 화면에 그리기.
문제점!!
여기서 문제점은 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그 때 마다 Render Tree가 재생성된다.
즉 모든 요소들의 스타일을 다시 계산을 해야되서 Layout, Repaint 과정까지 다시 거치게 된다.
인터렉션이 적은 웹이면 괜찮지만 만약 인터렉션이 엄청나게 많다면? 작은 변화로 인해 위에 필요한 과정을 계속 거치게 되니 불필요하게 DOM 을 조작하는 비용이 너무 크게 된다.
위의 문제점 해결을 위한 가상 돔(Virtual DOM)
이러한 문제로 인해서 나오게 된 것이
가상 돔 Virtual Dom이다..
가상 돔이란 실제 DOM을 메모리에 복사해준 것으로 생각하면 된다.
그럼 가상 돔은 어떤 식으로 작동 될까?
데이터가 바뀌면 가상 돔에 렌더링되고 이전에 생긴 가상 돔과 비교해서 바뀐 부분만 실제 돔에 적용을 시켜준다.
바뀐 부분을 찾는 과정을 Diffing 이라고 부르며, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정 (reconciliation)이라고 한다.
이러한 가상 돔 덕분에 만약 요소가 30개가 변하였다고 하더라도 한번에 묶어서 한 번의 실제 돔 수정으로 처리를 해 돔을 조작하는 비용을 줄이게 되어 효율적인 운영이 가능해진다.
오늘 React에 대해 간략하게 알아보았다. 다음 시간부터 깊이 있는 학습을 계속해서 진행해보자!
