리엑트의 배경

순수하게 자바스크립트만 사용해서는 대규모 어플리케이션을 관리하기 어렵다

그래서 수많은 프레임워크들을 사용하여, 어플리케이션을 개발해나아갔다

그중 많은 어플리케이션들이 있었지만 대부분

• MVC
• MVVM
• MCW

즉 모델과 뷰를 따로 분리 해놓고 구조화 하는 방식이다

이런 방식들의 고질적인 문제는 업데이트 항목에 따라 변경해줘야하는 규칙을 정해야하는데

규모가 커지면 복잡해지고, 관리하기 힘들어진다

그래서 나온게 리엑트다

리엑트란?

오직 V(View)만 신경쓰는 라이브러리 이다.

리엑트에서는 컴포넌트를 이용해 특정 부분이 어떻게 생길지, 동작할지를 정한다

그리고 초기 렌더링과 리렌더링으로 성능을 아낀다.

초기 렌더링?

리엑트에서 다루는 rander()이라는 함수를 통해

• 컴포넌트가 어떻게 생겼는지 정의 = 뷰가 어떻게 생겼는지
• 뷰가 어떻게 작동하는지 정의

이러한 랜더링이 끝나면 → HTML 마크업을 만들고

HTML이 실제 페이지의 DOM요소에 주입한다

리엑트에서 업데이트 ⇒ 조화 과정

리엑트에서 컴포넌트는 데이터를 업데이트했을때 단순히 업데이트 한 값을 수정하는 것이 아니라.

새로운 데이터(초기 렌더링)를 가지고 render 함수를 또 다시 호출한다.(리렌더링)

하지만 이 결과를 바로 DOM에 넣지 않고 이전 render함수가 만들었던 정보와 비교하여

바뀐 부분만 업데이트 한다.

이때 비교하기 위해서 생기는 DOM 트리가 가상DOM이다

리엑트의 특징

리엑트의 주요 특징은 Virtual DOM을 사용한다는 것이다.

DOM?

객체로 문서 구조를 표현하는 방법이다 XML이나 HTML로 작성된다

이러한 DOM은 동적 UI에 최적화되어 있지 않다

즉, DOM 자체는 빠르지만, 웹페이지의 변화를 동적으로 처리 하기에는 많은 시간이 걸린다

⇒ 리엑트는 이런 동적처리를 가상DOM에서 필요부분만 업데이트 하기 때문에 DOM의 처리 시간을 최소화 시킨다.

하지만, 지속적으로 데이터가 변화하는 대규모 애플리케이션에서는 여전히 문제가 있다.

리엑트의 또다른 특징

앞서 말한 순수자바스크립트를 지원하긴 하지만, 프레임워크가 아니라, 라이브러리이다

즉, 기타기능은 직접구현해야한다

하지만

• 라우팅 → 리액트 라우터
• Ajax 처리 → axios or fetch
• 상태 관리 → 리덕스 or MobX

등을 이용하여 개발이 가능하다

원하는 라이브러리 조합이 가능하지만, 여러 라이브러리를 접해해야한다는 단점도 있다.