[React] 리엑트는 어쩌다 만들어졌을까?

 

 

Javascript를 사용하여 html로 구성한 UI를 제어할 때, DOM을 변형시키기 위해 DOM을 건드린다. 

이러한 과정에서 숙련된 개발자라면 코드를 최대한 깔끔하게 정리하여 쉽게 유지보수 할 수 있지만,

대부분의 경우 코드가 난잡해지기 쉽다. 

 

아래와 같은 구조로 된다. 

 

 

 

쉽게 설명해 프레임워크들이 만들어진 이유이고, 작동방식은

자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어서 업데이트하는 작업을

간소화해주는 방식으로 웹개발의 어려움을 해결해주었다. 

 

하지만 리엑트의 경우 조금 다른 발상에서 만들어졌다. 

리엑트는 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정하는게 아니라, 

아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작 되었다. 

 

 

이렇게 나온게 Virtual DOM이다.

 

 

 

Virtual DOM : 가상의 DOM

- 메모리에 가상으로 존재하는 DOM으로서 그냥 자바스크립트 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다.

 

 

 

정리 

 

리엑트가 렌더링하는 방식 
: 가상 DOM에 적용

- 변경 사항을 효율적으로 처리 
- 깔끔한 코드를 작성할 수 있다. 

 

 

 

 

출처

https://react.vlpt.us/basic/01-concept.html

1. 리액트는 어쩌다가 만들어졌을까? · GitBook