React를 사용하는 이유? - 1 ) SPA과 VirualDOM
React를 사용하는 이유에 대해서 프론트엔드 데이터 처리를 쉽게 도와주는 라이브러리 정도로만 알고 있어 React가 뭔지는 알겠는데 왜 사용하는지? 어떤 문제점을 해결하기 위해 만들어젔는지 알지 못해 찝찝했다,
그 찝찝함을 덜기위해 React를 좀더 자세하게 알아볼려고 한다.
이번 포스팅에선 React를 사용하는 이유에 대해서 알아 보기전에 숙지해야될 개념인, SPA와 VirualDOM에 대해서 알아보고자 한다.
React는 SPA방식에 최적화된 라이브러리다!
SPA (Single Page Application)
SPA는 웹사이트 구성방법중 하나로 1개의 페이지만 있는 어플리케이션이라 정의 할 수 있다, 보편적인 웹 사이트 처럼 회원가입, 글쓰기 등 복잡한 기능을 지원하지만 처음에 호출된 HTML상에서 필요한 데이터만 호출하여 화면을 구성해주는 것으로 페이지의 이동이 일어나지 않는다.
이처럼 SPA 방식은 변경되는 View 부분만 데이터를 받아서 처리하기 때문에 모든 부분을 렌더링 했던 기존 방식보다 속도가 빠르다는 장점이 있다.
이러한 방식을 사용하게되면 수정할 부분만 효율적이게 조작할 수 있다는 장점이 있지만, 그만큼 웹 브라우저에게
요청을 많이 한다는 것이다, 페이지를 로딩시킬 경우 브라우저는 웹 렌더링 과정인 CPR 과정을 거치게된다.
DOM 생성 => CSSOM => Render Tree => ... => 웹 페이지 로드
SPA특성에 따라 변화가 발생할 때마다 CPR과정을 거치게되면 전체적인 프로세스를 비효율적으로 만들게된다.
이러한 문제를 해결하기 위해 고안된것이 바로 VirtualDOM 방식이다
VirtualDOM 방식은 기존 뷰에 변화가 발생할 때 웹 브라우저 DOM을 거치기 전에 가상에서 DOM을 먼져 적용시키고
그 최종적인 결과만 실제 DOM으로 path하게 된다, 그러므로 브라우저 내에서 발생하는 연산의 양이 줄게 되면서
성능이 개선되는 것이다,
사실 최적화 작업을 동일하게 진행 했다는 전제하에 기존에 DOM(손으로)보다 VirtualDOM이 더 빠르지는 않다,
중요한건 VirtualDOM의 주 목적은 그 최적화 작업을 자동화로 해주기 떄문이다, 그러기에 리액트를 사용한다고 해도 최적화 작업이 제대로 이뤄지지 않을경우 포퍼먼스가 기존에 DOM보다 훨씬 떨어질 수 있다.
최적화 작업을 자동으로 하게되면
DOM 관리를 Virtual DOM 이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM 을 조작할 것 이라던지, 이미 조작했다던지에 대한 정보를 공유 할 필요가 없어진다. 즉, 각 변화들의 동기화 작업을 치지 않으면서도 모든 작업을 하나로 묶어줄 수 있다.