[React]리액트가 나오게 된 이유

🍉자바스크립트를 사용한 DOM 변형의 한계😥

• DOM : 각 HTML에 대한 정보를 지니고 있는 자바스크립트 객체
• 인터랙션이 자주 발생하고 이에 따라 동적인 UI를 표현해야 한다면 규칙도 너무 다양해지고 관리하기도 매우 힘들 것이다.
• 웹 어플리케이션이 규모가 커지게 되면 코드가 난잡해지고 유지보수에도 어려움

 

🍉 새로운 발상을 가지고 등장하게 된 리액트💡

리액트는 어떠한 상태가 바뀌었을 때 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라 아예 다 날려버리고 처음부터 모든 것을 새로 만들어서 보여준다면 어떨까 라는 아이디어에서 개발이 되었다.

그렇게 한다면 업데이트를 어떻게 해야할지에 대한 고민을 전혀 안해도 되기 때문에 개발이 정말 쉬워질 것이다.

 

하지만 정말 동적인 UI를 보여주기 위해서 모든 것을 다 날려버리고 모든 것을 새로 만들게 된다면 속도가 굉장히 느릴 것이다.

 

→ 그러나 리액트에서는 Virtual DOM (가상DOM)이라는 것을 사용해서 성능을 지켜가면서도 이를 가능케 했다!

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

 

리액트에서는 상태가 업데이트되면 업데이트가 필요한 UI를 메모리에 있는 Virtual DOM에다 렌더링을 한다.  그리고 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 사용해서 실제 브라우저에서 보여지고 있는 DOM과 Virtual DOM의 메모리에 있는 DOM과 비교를 하고 차이점을 감지하고 나서 실제 DOM에다 fetch를 해준다.

fetch를 한다는 것은 차이를 확인해서 필요한 변화를 반영시켜준다는 것을 의미한다. 이를 통하여 리액트에서는 정말 필요한 변화만 발생시키게 되면서 업데이트를 어떻게해야할지에 대한 고민을 하지 않아도 되면서도 빠른 성능을 지켜낼 수 있게 되었다.

 

그러므로 우리는 리액트를 이용할 때 UI를 어떻게 업데이트할 지가 아니라 UI를 어떻게 보여줄지에 집중하면 된다. 그리고 리액트에서는 UI를 컴포넌트라는 것을 사용해서 선언을 하게 되는데, 컴포넌트라는 것은 일종의 UI 조각이라고 이해를 하면 된다.