React는 어쩌다 만들어졌을까요?

feat. 요즘 React는 클래스형 컴포넌트가 아닌 Hooks + 함수형 컴포넌트를 이용합니다.

 

 

Interaction이 자주발생하고 이에 따라 동적으로 UI로 표현해야 되는 웹페이지를 만들때 Javascript를 이용해서 DOM을 변경할때 정말 복잡해지고 관리하기도 힘들어집니다.

 

 

<React로 개발방법>

React는 신기하게 어떻게 DOM을 업데이트할지 규칙을 정하는것이 아니라 아애 다 날려버리고 처음부터 새로운것을 보여주는게 어떨까? 라는 발상에서 나왔습니다.

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

 

 

<Virtual DOM이란?>

하지만, 정말 동적인 UI를 보여주기 위해서 모든걸 다 날려버리고 모든걸 다 새로만들게 된다면 속도가 굉장히 느릴겁니다. 작은 웹 어플리케이션이라면 상관이 없지만 규모가 큰 웹 어플리케이션이라면 상상도 할 수 없는 일입니다. 

이를 해결하기 위해서 Virtual DOM이 나왔습니다. 이것은 브라우저에서 실제로 보여지는 DOM이 아니라 이것은 메모리에 가상으로 존재하는 DOM으로서 그냥 Javascript 객체이기 때문에 작동성능이 실제로 브라우저로 DOM을 보여주는것보다 속도가 훨씬 빠릅니다.

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

이로서 정말 필요한 변화만 발생시킴으로서, 업데이트를 어떻게 할지 고민하지 않으면서도 빠른성능을 지켜주게 되었습니다. 

즉, UI를 어떻게 업데이트를 할지가 아니라 UI를 어떻게 보여줄지에 집중만하면 됩니다.

 

 

 

<React Component>

1. 가독성을 훌륭하게 만들어줍니다.

2. 재사용성이 용이합니다.

3. 유지보수하기 좋게 만들어줍니다.

본인이 만든 컴포넌트를 다룰줄 알면 다른사람이 만든 컴포넌트도 다룰줄 알게 됩니다.