[REACT] 리액트가 만들어진 배경, 리액트가 뭐냐?!

리액트가 만들어진 배경

리액트가 뭐냐?!

 

• 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
• 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다.
• 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, AIP통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야한다.

 

 

---

 

 

JavaScript

• DOM을 변형시키기 위해서 브라우저의 DOM Selector API를 사용해서
• 특정 DOM을 선택한 뒤
• 특정 이벤트가 발생하면 변화를 주도록 설정한다.
• 인터렉션이 자주 발생하면 규칙이 다양하고 관리도 힘들다.

 

Ember,Backbone,AngularJS

• 프레임워크
• 자바스트립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결
• 업데이트 작업 간소화

 

 

React

상태가 바뀌었을때 업데이트 x -> 아예 다 날리고 새로 만들어서 보여준다.

하지만 새로 다 바꾸면 속도가 느리다 -> 그래서 가상돔 사용

 

가상돔:

메모리에 가상으로 존재하는 DOM으로서

JavaScript객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것보다 속도가 빠르다.

 

상태 업데이트

-> 업데이트 필요한 UI를 Virtual DOM을 통해서 렌더링

-> 실제 브라우저에 보여지고 있는 DOM과 비교

-> 차이가 있는 곳을 감지

-> 실제 DOM에 패치한다.