React와 DOM, Web Component에 대해서

React란?

Facebook에서 제작한 웹 프레임워크
비교되는 대상으로는 Angular.jsVue.js가 있다.

stackoverflow Developer Survey Results 2019

개발자의 성지인 스택오버플로우의 통계에 따르면 웹 프레임워크 중 2위
차지할 정도로 많이 사용되어지고 있는 웹 프레임워크 중 하나이다.

1

위의 통계에서 ReactVue같은 프레임워크는 프론트엔드를 위한 프레임워크고
ExpressSpring, Django백 엔드를 위한 웹 프레임워크다.

React의 장점

선언형

선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만든다.
웹에서 상호작용이 많은 UI를 만들 때 생기는 어려움을 해소해준다.
웹 어플리케이션의 각 상태에 대한 간단한 만 설계하면 된다.
데이터변경됨에 따라 변경된 컴포넌트만 효율적으로 갱신렌더링한다.

컴포넌트 기반

컴포넌트 로직이 템플릿이 아닌 Javascript로 작성한다.
따라서 다양한 형식의 데이터손쉽게 전달이 가능하다.
DOM과는 별개로 스스로 상태를 관리하는 컴포넌트로 구성되어있다.

많은 부분에 사용 가능

Node를 이용해 서버를 구성해 렌더링이 가능하다.
React Native를 이용한 멀티 플랫폼 어플리케이션 구현이 가능하다.

DOM이란?

Document Object Model의 약자
여기서 DocumentHTML을 뜻하며 DOM은 아래와 같은 웹 페이지의 구조를 뜻한다.

2

위의 DOMbodyh1div가 묶여있고 divp두개와 묶여있는 구조를 갖는다.
따라서 DOM은 거대한 트리 구조로 되어있고 웹에서 동작하는 형태다.

컴포넌트란?

컴포넌트는 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.
레고와 비슷하게 작성된 컴포넌트를 모아 웹 어플리케이션을 구성할 수 있다.
React공식문서에 있는 아래의 이미지로 컴포넌트를 설명할 수 있다.

3

위의 이미지에는 크게 5개의 컴포넌트가 존재한다.

  1. 모든 것을 감싸고 있는 빨간색 컴포넌트
  2. 사용자의 입력을 받는 파란색 컴포넌트
  3. 사용자의 입력을 기반으로 데이터를 보여주는 주황색 컴포넌트
  4. 검색 카테고리 헤더을 보여주는 초록색 컴포넌트
  5. 검색 결과를 보여주는 보라색 컴포넌트

DOMHTML문서의 구조 자체며 컴포넌트는 그 구조를 추상화한 것이다.

이전 웹에서의 DOM과 Component

웹은 각각의 컴포넌트를 거치며 데이터를 가지고 오며 페이지를 구성한다.
어떠한 페이지에서 변경사항이 생겼을 경우(상태가 변한 경우) 이전의 경우
처음으로 돌아가 다시 모든 컴포넌트를 거치며 새로 페이지를 구성한다.

4

React에서의 DOM과 Component

React에서는 이전의 웹과 다르게 상태가 변경된 경우 Virtual DOM에서변경된 구조를
미리 구성한 후 기존의 React DOM과 비교해 변경된 컴포넌트만찾아 재구성한다.

5

[Image source : www.oreilly.com - learning react native]

이러한 상태 변경 관리ReactProps로 관리하게 된다.
그 각각의 상태(데이터)는 ReactState로 관리하게 된다.
많은 컴포넌트Props가 존재하고 서로의 컴포넌트가 상호작용한다면 매우 복잡해진다.


Written by@[Minsu Kim]
🌈22살 대학생 학생 개발자🙂