[React] React.js의 기본 😘

이번 포스팅에서는 본격적으로 React.js의 기본에 대해 포스팅하고자 한다.

1. React.js란?

ReactJS란 Meta(Facebook)이 개발한 오픈소스 Javascript 라이브러리이다.
대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술이다.
복잡한 대규모 웹 서비스에 필요한 강력한 기능들을 제공하고 있다.

1) React.js 얼마나 인기 있길래?

국내에서는 거의 185개의 기업이 React.js를 사용하고 있으며,
2위인 Vue.js와는 2배의 격차를 벌리고 있을 정도로 그 인기가 매우 대단하다.

2) React.js의 기술적 특징

1. 컴포넌트 기반의 UI 표현

📌 컴포넌트 : 화면을 구성하는 요소, UI를 구성하는 요소

📌 컴포넌트를 자바스크립트 파일로 모듈화한다.

📌 만약에 컴포넌트를 이용하지 않는다면?

• 모듈화할 방법이 존재하지 않는다.

• 일일히, 공통 영역 부분을 복사해서 붙여넣어 줘야 한다.

• 중복 코드가 발생하여, 코드가 많아질수록 유지보수가 힘들어진다.

2. 화면 업데이트 구현이 쉽다.

📌 화면 업데이트

• 사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 동작을 바꿔 상호작용하는 작업

📌 선언형 프로그래밍

• 불필요한 과정을 생략하고, 목적만 간단하게 명시하는 방법

cf) 명령형 프로그래밍 : 목적을 이루기 위한 모든 일련의 방식을 설명함.

📌 React.js는 선언형 프로그래밍 라이브러리

• 업데이트를 위한 복잡한 동작을 직접 정의하지 않고, 특정 변수를 바꾸는 것만으로 화면 업데이트 가능

📌 React.js에서는 State 변수를 주로 이용한다

• 각각의 컴포넌트에는 현재의 컴포넌트의 상태를 저장하는 특수한 변수가 존재

• State에 따라 다른 UI를 랜더링하도록 설정할 수 있다.

3. 화면 업데이트를 빠르게 처리

📌 브라우저의 랜더링 과정

• HTML과 CSS로 작성한 웹 페이지를 단계에 거쳐서 화면에 랜더링 (Critical Rendering Path)

• 첫번째, HTML,CSS를 DOM과 CSSOM으로 변환한다.

DOM(Document Object Model)

CSSOM(CSS Object Model)

• 두번째, DOM과 CSSOM을 합쳐 Render Tree 생성

• 세번째, 요소의 배치를 잡는 작업(Layout) 수행

• 마지막으로, 요소를 화면에 그린다.

📌 화면의 업데이트

• Javascript가 DOM을 수정하면 화면에 업데이트가 발생한다.

• Critical Rendering Path 다시 처음부터 실행

• 주의할 점은 Layout, Painting은 매우 오래 걸리는 작업이라는 점이다.

• 따라서 동시에 발생한 업데이트를 모으고 모아, 한번에 DOM 업데이트 작업.

• React는 Virtual DOM을 통해 이 과정을 자동으로 해준다.

3) Virtual DOM