📖 React.js

React란?

• 메타(구 페이스북)이 개발한 프론트에드를 위한 오픈 소스 자바스크립트 라이브러리
• 대규모 웹 서비스 UI를 더 편리하게 개발하기 위해 만들어진 기술
• React.js로 만들어진 서비스들 : 넷플릭스, 페이스북, 인스타그램, 노션 등등

📍 React를 사용하는 이유

1. 컴포넌트 기반으로 UI를 표현한다.

   • 컴포넌트(Component) : 화면, UI를 구성하는 요소
   • Header → header.js
     Main → Main.js
     Footer → Footer.js
   • 자바스크립트 파일에 component 단위로 모듈화해서 보관 ➡️ 중복 코드가 없다.

2. 화면 업데이트 구현이 쉽다.
   ✅ 업데이트 : 사용자의 행동(클릭, 드래그)에 따라 웹페이지가 스스로 모습을 바꿔 상호작용하는 것

   • React는 선언형 프로그래밍 방식으로 동작 ➡️ 목적만 깔끔하게 명시, 코드가 간결함
   • 컴포넌트가 가지고 있는 변수의 값을 바꾸면 값에 따라 다른 UI를 랜더링할 수 있다.
     (즉, 값을 바꾸는 것만으로도 화면 업데이트가 가능)

3. 화면 업데이트가 빠르게 처리된다.

• 브라우저의 렌더링 과정(Critical Rendering Path)
  

  • Render Tree : 웹 페이지의 설계도 역할 → 모든 정보가 포함되어있다.
  • Layout : 요소의 배치를 잡는 작업
  • Painting : 실제로 화면에 그려내는 과정

• 브라우저 렌더링 과정에서 업데이트 하는 과정

  JavaScript ➡️ DOM ➡️ Render Tree ➡️ Layout(Reflow) ➡️ Painting(Repaint)

  • 문제점
    수정하는 횟수가 많을 경우 DOM도 수정한 횟수만큼 업데이트하므로 성능이 저하된다.

• React를 사용할 경우
  : 동시에 발생한 업데이트를 모아서 DOM 횟수를 초기화하는 작업을 React에서 자동으로 해준다.

  Virtual DOM
  ➡️ 실제 브라우저가 렌더링 하는 DOM을 자바스크립트 객체로 복사해놓은 것
  ➡️ React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영해본다. → 모인 업데이트를 한번에 반영한다 (DOM 1회 수정)