React?
Meta에서 개발한 오픈소스 JS 라이브러리
대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어졌다.
🔎 React로 만들어진 서비스들
넷플릭스, 페이스북, 인스타그램, 노션 등...
→ 대기업에서 많이 사용하다보니 웹프레임워크 중 가장 점유율이 높다
👍 React의 기술적인 특징
- 컴포넌트를 기반으로 UI를 표현한다
- 화면 업데이트 구현이 쉽다.
- 화면 업데이트가 빠르게 처리된다.
1 . 컴포넌트 (component)
화면을 구성하는 요소, UI를 구성하는 요소를 뜻한다.
페이지를 구성하는 모든 요소(Header, Main,Footer, Article 등)를 각각의 컴포넌트로 만들어 관리할 수 있다.
🔎 컴포넌트의 장점 - 코드 수정이 유리하다
→ 페이지마다 동일한 코드를 넣다보면 페이지 수가 늘어날 수록 코드 수정이 어려워진다.
이때, 공통적인 부분을 리액트의 컴포넌트로 만들게 되면 한 번의 수정으로 모든 페이지에 공통 적용된다.
2. 화면 업데이트 구현이 쉽다
🔎 업데이트란?
사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것
👍 리액트가 업데이트 구현이 쉬운 이유?선언형 프로그래밍이기 때문이다!
선언형 프로그래밍 VS 명령형 프로그래밍
| 선언형 프로그래밍 | 명령형 프로그래밍 | |
| 특징 | 과정은 생략하고 목적만 간결히 명시 | 모든 일련의 과정을 설명 |
| 코드의 복잡도 | 코드가 간결함 | 코드가 길고 복잡합 |
| 예시 | React | Javascript |
🚨 컴포넌트 내에 State라는 변수의 값을 정해 값에 따라 다른 렌더링 결과를 출력한다.
3. 화면의 업데이트가 빠르게 처리된다
화면의 업데이트는 DOM을 수정할 때 일어난다.
자세한 화면 업데이트 과정은 아래의 글에서 볼 수 있다
[Browser] 브라우저 렌더링 과정
웹 브라우저(Web Browser)?웹에서 페이지를 검색하고 표시하며, 사용자가 인터넷상의 다양한 정보를 탐색하고 상호작용 할 수 있도록 도와주는 응용 프로그램이다. 웹 브라우저에서는 뼈대가 되는
samsamfe.tistory.com
화면 업데이트를 빠르게 처리하기 위해서는 동시에 발생한 업데이트를 한 번에 모아 DOM으로 보내주는 작업이 필요하다
그러나 서비스의 규모가 커질 수록 처리하기 힘들어진다.
→ React는 Virtual DOM이라는 것을 통해 이 과정을 자동으로 처리할 수 있다.
🔎 Virtual DOM이란?
- DOM을 자바스크립트 객체로 흉내낸 것으로 일종의 복제판이다.
- React에서 업데이트가 발생할 때 실제 DOM에 반영하기 전 가상의 DOM에 먼저 반영을 한 뒤 실제 DOM에 업데이트를 한다.
→ 실제 DOM은 1회 수정이 되었기 때문에 화면 업데이트 속도가 빨라진다
출처
이정환 - 한 입 크기로 잘라먹는 리액트