리엑트가 왜 필요한가에 대해 가장 명확하게 설명해주는 기능이지 않을까?
내가 관리하는 페이지중 2015년개발 된 페이지가 있는데, HTML5 + Jquery + CSS3 정도의 구성으로 개발 됐다. 크게 동적인 기능이나 복잡한 구현이 필요 없었고 DOM형식으로 충분히 커버가 가능했던 것 같다.
하지만 최근들어 요구사항이 많아지 리뉴얼 해야 하는 이슈에 도달했다. 이유는 다양하겠지만, 가장 큰 것은 '가독성' 문제 일 것이다.
과거, 온라인에서 특정 서비스를 이용한 다는 것은 목적과 결과를 얻기 위한 과정으로 보여지는 것에 대한 복잡도는 어느정도 인내해야 했다. 그리고 대부분의 서비스들은 그렇게 만들어졌다. 가독성보다 업무의 효율과 빠른 결과를 나타내기 위한 과정으로 말이다. 때문에 화면에 덕지덕지 붙어서 나열되는 항목들도 어찌보면 한페이지안에서 다 해결해주고자 나름 고객을 생각한 서비스적(?) 마인드에서 나온 합리화 이었다.
이러한 낡고 오래된 사상은 유트브, SNS의 진화와 함께 몇초안에 내용이 잡히지가 않으면 스트레스를 받는, 가독성이 중요시되는 세상에 살아가는 우리에게 필요없는 퇴출되고 있다.
그렇다면 어떻게 해야한다는 말인가. 해당 페이지는 이미 자리잡은 DOM구조로 고구마 줄기마냥 덕지덕지 한페이지 안에 여러개의 항목을 나열하고 있는데 말이다. 심지어 고객은 DOM의 특성을 고려하지 않는다. 페이지 안에서 동적으로 값들이 계속 변화되기를 바라고 있다.
(예를들어, 특정 아이콘 클릭 시, 하단에 나타나는 틀안의 값의 구성들이 동적으로 계속 변화되는 기능)
Virtual DOM
이런 극한 상황에서 필요한 기능이 바로 Virtual DOM 이라 판단된다.
기존에 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는 비효율적인 방식을 해결 해 줄 수 있다.
하지만, Virtual DOM은 '속도'가 좋아지는 것은 아니다 다만
"지속적으로 데이터가 변화는 대규모 애플리케이션 구축"시에 적합하다
Virtual DOM은 세가지 절차를 밟는데
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 한다
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다
3. 바뀐 부분만 실제 DOM에 적용한다.
댓글