React

React

  React는 UI를 렌더링 하는 데 관여하는 라이브러리입니다. 그리고 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용하며, 상태 관리를 위해서는 redux, mobx 등 여러 모듈을 사용하며, 빌드를 위해서는 webpack, npm 등등, 테스팅을 위해서는 Eslint, Mocha 등을 이용합니다.

 

컴포넌트(Component)

  React는 여러 컴포넌트를 이용해서 웹 앱을 개발하게 됩니다. 컴포넌트란 React로 만들어진 앱을 이루는 최소한의 단위입니다. 즉, React는 여러 컴포넌트 조각으로 되어 있습니다.

 

컴포넌트 종류

클래스형 컴포넌트(Class Components)

class App extends Component {
  render() {
    return <h1> hi. </h1>;
  }
}

 

함수형 컴포넌트(Functional Components)

function App() {
  return <h1> hi. </h1>;
}

 

웹 페이지의 빌드 과정(Critical Rendering Path, CRP)

• DOM Tree 생성: 렌더 엔진이 문서를 읽어들여 파싱하고, 어떤 내용을 페이지에 렌더링할 지 결정합니다.
• Render Tree 생성: 브라우저가 화면에 보이는 모든 콘텐츠(DOM)와 스타일 정보(CSSOM)를 포함하는 최종 렌더링 트리를 출력합니다.
• Layout (reflow): 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계입니다.
• Paint: 실제 화면에 그리는 단계입니다.

 

  웹 페이지의 빌드 과정을 보면, DOM에 변화가 발생할 때마다 Render Tree가 재생성 됩니다. 즉, 모든 요소들의 스타일을 다시 계산하고, Layout, Repaint 과정을 다시 거치게 됩니다. 이러한 문제로 인해서 나오게 된 것이 가상 돔(Virtual Dom) 입니다.

 

가상 돔(Virtual Dom)

  가상 돔(Virtual Dom)은 React의 주요 특징 중 하나입니다. 가상 돔이란 실제 DOM을 메모리에 복사해준 것으로 생각하면 됩니다. 데이터가 바뀌면 가상 돔에 렌더링되고, 이전에 생긴 가상 돔과 비교해서 바뀐 부분만 실제 돔에 적용합니다. 바뀐 부분을 찾는 과정을 Diffing이라고 하며, 바뀐 부분을 실제 돔에 적용시켜주는 것을 재조정(Reconciliation)이라고 합니다.

 

 

 

[참고 정보]

인프런- 따라하며 배우는 리액트 A-Z