[React]리액트란?

리액트란 페이스북에서 개발한 유저 인터페이스 라이브러리이다.

 

개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해주는데 페이스북, 인스타,넷플릭스 등 많은 큰 서비스에서 사용하고 있다.

 

리액트는 Virtual DOM이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저 인터페이스를 렌더링하여 최소한의 DOM처리로 컴포넌트들을 업데이트 할 수 있게 해준다.

 

Virtual DOM과 DOM

먼저 VirtualDOM과 DOM에 대해 알아보자면

 

DOM이란 객체를 통하여 구조화된 문서를 표현하는 방법을 말한다.(이를테면 xml이나 HTML 같은)

 

트리 형태로 되어있어 특정 노드를 찾거나 수정, 제거, 삽입 할 수 있다.

 

문제는 DOM은 동적 UI에 최적화 되어있지 않다는 것이다. 이전에는 자바스크립트나 제이쿼리를 사용하여 동적으로 동작하게 할 수 있었지만 웹 어플리케이션의 구조가 커지고 수많은 데이터가 로딩 되면서 DOM에 직접 접근하여 변화를 주게 되면 성능상의 이슈가 발생한다. (속도가 느려짐)

 

사실 DOM이 느리다기보다는 브라우저단에서 DOM의 변화가 일어나면 브라우저가 css를 다시 연산하고 레이아웃을 구성하고 웹 페이지를 리페인트하는데 이 과정에서 시간이 허비된다.

 

따라서 최소한의 DOM 조작을 통하여 작업을 처리하는 방식을 고려하게  되는데 이 과정에서 나오게 된게 Virtual DOM이다.

 

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신 이를 추상화 시킨 자바스크립트 객체를 사용한다. 일종의 DOM의 가벼운 사본이라고 볼 수 있다.

 

리액트에서 데이터가 변하여 브라우서 상에서 실지 DOM을 업데이트 할 때의 절차

데이터가 업로드 되면 전체 UI를 Virtual DOM에 리렌더링

-> 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교

-> 바뀐 부분만 실제 DOM에 적용

 

이 과정을 통해 최소한의 DOM 조작을 통해 작업을 처리할 수 있게 된다.

 

리액트의 주요한 특징

 

1. 동적인 웹페이지를 만들 수 있음

 

2. 지속해서 데이터가 변화하는 큰 어플리케이션을 구축하는데 용이

 

3. 컴포넌트라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 하며 재사용을 통해 개발 시간을 절약

 

4. 단방향 데이터 흐름

 

5. Hooks이란 것을 이용하여 컴포넌트의 상태를 쉽게 관리할 수 있음

 

6. SPA(Single Page Application)으로 화면 구성에 필요한 모든 HTML을 클라이언트가 가지고 있고 서바사이드에는 필요한 데이터를 요청하고 json으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다.

 

 

 

현재 리액트로 서비스를 목적으로 한 웹 앱을 제작하고 있는데 앞으로 하나하나 포스팅 할 예정이다