[React] 리액트가 무엇인지 알아보자

리액트란 UI를 렌더링하는데 기여하는 Javascript Library로 프레임워크가 아닌 자유로운 형식이다.

라이브러리이기 때문에 대부분의 것들이 정해져있는 프레임워크와 달리 필요한 리액트 생태계의 수많은 라이브러리를 적절하게 가져와서 사용해야한다.

 

리액트는 여러 컴포넌트 조각으로 구성되어 있으며, 클래스형 컴포넌트와 함수형 컴포넌트가 있다.

초기에는 클래스형 컴포넌트를 사용하다가 React Hooks가 출시된 이후 함수형 컴포넌트를 더 많이 사용한다.

 

리액트 프로젝트를 생성하기 위해서는 Node.js와 NPM이 필요한데 리액트 앱은 웹 브라우저에서 동작하기 때문에 실행에 꼭 필요한 것은 아니지만, 개발에 필요한 주요 도구들(바벨, 웹팩 등)을 사용하기 위함이다.

 

Virtual DOM

웹 페이지 빌드 과정에서 HTML, CSS, JS 등을 순서대로 반영하게 된다. 이때 렌더링 순서를 정의하는 DOM tree를 생성하게 되는데  DOM에 조금이라도 변화가 생기게 된다면, 이 과정을 처음부터 다시 반복하게 된다. 즉, 빈번한 인터렉션이 존재하는 웹에서는 오버헤드가 커지게 된다.

이를 방지하기 위해서 기존 DOM을 복제한 가상 DOM을 생성한 후 변경 사항을 가상 DOM에 먼저 반영하여 실제 DOM과 비교 후  바뀐 부분만 실제 DOM에 반영하여 변경사항을 업데이트 해준다.

이렇게 하면 가상 DOM도 똑같은 작업을 반복하는 것이 아닌가 라는 생각이 들겠지만 가상 DOM은 실제 DOM을 추상화하여 간소화되어 있기 때문에 더 빠르게 작업을 수행할 수 있다.

 

단점은 가상 DOM과 실제 DOM을 비교하는 연산이 추가로 수행된다는 점과 DOM을 복제하여 메모리에 저장하기 때문에 추가 메모리를 사용하게 된다는 점이다.
하지만 이 역시, 추상화된 DOM과 최적화된 Diffing 알고리즘으로 인해 대부분의 경우 문제가 되진 않는다.