React-특징

공식 문서

---

1. 선언형 프로그래밍

명령형 (HOW)	선언형 (WHAT)
DOM 스크립트 기반	React, Vue
어딘가를 가야할 때 일일이 다 서술 해야 한다.	목적지만 말하면 된다.
즉, 스크립트를 작성할 때 하나하나 다 서술해 주어야 한다. (무엇을 어떻게 해야 하는지 설명한다.)	목적지를 선언 했으니, 목적지를 갈 수 있도록 도와준다. (도와주는 도구가 리액트 ,vue와 같은 도구이다. )

선언형 프로그래밍은 로직에 집중할 수 있고 패턴화된 방식으로 설계할 수 있어서 유지보수에 용이하다.

React 예시

• 상태를 선언한다.
• 리액트의 이벤트와 바인드 한다.
• 모델이 변경됨을 감지한 후, 변경된 부분만 DOM에 반영한다.

명령적인 방식으로 DOM을 조작하는 전통적인 방식에서 벗어나, DOM 조작은 React-DOM 라이브러리에게 맡기고 개발자는 화면이 어떻게 렌더링 되기를 알려주기만 하면 된다. state에 따라 React가 Dom을 조작해서 화면에 구현하게 된다.

// 바닐라 JS

const rootElem = document.getElementById("root");

const divElem = document.createElement("div");

const h2Elem = document.createElement("h2");
h2Elem.innerText = "Let's get started";

divElem.appendChild(h2Elem);
rootElem.appendChild(divElem);

// JSX 없는 순수 React

const App = () => {
  return React.createElement(
    "div",
    {},
    React.createElement("h2", {}, "Let's get started")
  );   
}

// JSX 사용

const App = () => {
  const [expenses, setExpenses] = useState(DUMMY_EXPENSES);
  return (
    <div>
      <h2> Let's get started </h2>
    </div>
  )
}

2. Virtual Dom

1) DOM

DOM은 자바스크립트 Node 개체의 계층화된 트리이다.

브라우저는 HTML 코드를 해석해서 트리 형태로 구조화된 노드들을 가지고 있는 문서를 생성한다.

HTML문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노그 개체들의 트리 구조로 변환된다.

즉, DOM의 목적은 jS를 사용해서 이 문서에 대한 스크립트 작성 (삭제, 추가, 바꾸기, 이벤트 처리, 수정)을 위한 프로그래밍 인터페이스를 제공한다는 것이다.

2) Virtual Dom

UI를 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 Real DOM과 동기화하는 프로그래밍 개념이다.

공식문서

Virtual DOM이 React가 선언형 프로그래밍이 가능하도록 한다. React에게 원하는 UI를 알려주면 DOM이 그 상태와 일치하도록 한다. 즉, Virtual DOM이 실제 Real DOM을 직접 조작한다.

또한, 성능면에서도 Virtual DOM을 사용하는 것이 좋을 수 있다. Real DOM을 직접 조작하는 것은 실제로 그렇게 성능에 대한 문제를 발생 시키지 않는다. 하지만 렌더링 과정 때문에 성능에 대한 이슈가 생긴다.

렌더링 과정 참고 블로그

• HTML parser가 HTML을 바탕으로 DOM Tree를 그린다.
• CSS parer가 CSS를 바탕으로 CSSOM을 그린다.
• DOM에 CSSOM을 적용하여 Render Tree를 그린다.
• Render Tree를 바탕으로 Layout, Paintng과정을 통해 실제 화면에 렌더링한다.
• HTML 코드를 읽다가 script태그를 만다면 파싱을 잠시 중단하고 js 파일을 로드한다.

즉, DOM에 변화가 생기면 렌더 트리를 재 생성하고 레이아웃, 페인팅하는 과정이 다시 거쳐야 한다.

SPA에서는 DOM 조작이 빈번하게 발생하기 때문에 브라우저가 많은 연산을 하고 전반적인 성능 이슈를 야기하게 된다.

그래서 React는

• 변화가 발생되면 변경된 state로 Virtual DOM을 그린다.
• Virtual DOM은 실제 DOM이 아닌 메모리에서 연산을 하기 때문에 빠르다.
  • 실제로 렌더링 하지 않기 때문에 연산 비용이 적다.
  • 한 번에 묶어서 처리한다.
• 연산이 끝나면, 단 한 번 Virtual DOM과 Real DOM을 비교하여 변경된 사항만 반영하여 새로운 화면에 렌더링한다.

사실 위의 과정은 Virtual DOM이 없어도 이루어질 수 있다. 변경 사항을 그냥 묶어서 DOM Fragment에 적용한 다음 기존 DOM에 반영 시키면 된다.

Virtual DOM은 이를 자동화, 추상화 해놓은 것이다. 가장 큰 장점은 앞서 말 했듯이, 개발자가 직접 DOM을 관리하고 변화들을 동기화 하는 작업을 일일이 하지 않아도 되는 것이다. Virtual DOM이 변경 사항을 Diffing 알고리즘을 통해 비교하고 Real DOM에 자동으로 반영 시켜준다.

3. 컴포넌트 시스템

React의 모든 컴포넌트는 Virtual DOM의 노드로 구성된다.

구현 방법	설명
Component Driven Development (CDD)	CDD는 컴포넌트를 모듈 단위로 개발하여 UI 구축에 도달하는 개발 및 설계 방법론이다. 기본적인 컴포넌트 단위부터 시작하여 View를 구성하기 위한 점진적 결합 방식의 바텀업 성향을 보인다.
Atomic Design	Atomic Design은 원자, 분자, 조직체, 템플릿, 페이지로 적용해나가는 설계 방식이다.