[알고 쓰자] React 작동 원리

리액트, 왜 사용하시나요?

최근 기술 면접을 대비하여 준비를 하다 보니, 문득 내가 왜 React를 쓰고, React Native를 쓰는 거지? 생각이 들었다. 내가 React를 사용하는 이유에 대해 나조차 전혀 모르고 있었기 때문에 내가 왜 리액트를 사용해야 하고, 이 라이브러리를 통해 얻을 수 있는 것이 무엇인지에 대해 알아본다. 

결론부터 정의 해 보자면, 우리가 HTML, CSS, Javascript로 쌩 코딩하지 않는 이유는 시대의 변화와 흐름 때문이라고 볼 수 있다. 동적으로 사용자 친화적으로 웹 서비스가 변화 하면서 사용자에게 더 좋은 UI와 UX를 제공하기 위해 리액트를 사용하고 있는 것이다.

 

리액트란?

리액트 왜 사용하는지 결론을 냈으니, 리액트가 무엇인지 알아보자. 먼저 리액트 공식 Docs에서 리액트를 뭐라고 소개하는지 보자.

 

리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 정의한다. 리액트를 왜 사용한다고 했는가?

동적으로 변하는 UI를 만들기 위해서이다. 따라서 리액트는 동적으로 값이 변하는 State를 가지고 있는데, 이 State가 변할 때 UI를 자동으로 업데이트해주는 자바스크립트 라이브러리라고 생각하면 편하지 않을까 생각한다.

이 UI가 변할 때 모든 화면을 한번에 갈아엎으면 자원 손실이 크니깐 가상 DOM을 사용하여 변경될 부분만 효율적으로 업데이트해주는 구조를 가지고 있다.

 

그렇다면 DOM은 무엇인가? 그리고 Virtual DOM은 왜 쓰는가?

DOM은 문서 객체 모델(Document Object Model)의 약자이다. HTML, XML 및 XHTML과 같은 마크업 언어로 작성된 문서를 프로그래밍적으로 조작할 수 있게 해주는 인터페이스이다. 

DOM을 활용하여 텍스트파일이던 HTML 문서에 프로그래밍 언어가 접근 할 수 있도록 한다. 따라서 웹 브라우저에서 DOM을 활용하여 텍스트 파일을 객체로 만들고 각 객체에 자바스크립트와 CSS를 적용시킬 수 있는 것이다.

그럼 그냥 DOM으로 하면 되지, 왜 Virtual DOM까지 써가면서 힘들게 코딩을 해야하나? 의문이 들 수 있다. 

리액트에서 가상 돔을 사용하는 이유는 성능과 효율성 측면에서 있다. 

https://velog.io/@ye-ji/DOM-vs-Virtual-DOM

일반적인 브라우저(DOM) 에서 HTML의 요소, 스타일, 내용, 속성 등이 변경되면 해당 요소를 재 렌더링 한다. 이 과정을 re-flow라고 하는데, 리플로우 과정 중 DOM의 다른 요소들도 영향을 받아 리페인트가 발생하여 웹 페이지 성능에 영향을 미칠 수 있다. 

따라서 리액트는 Virtual DOM을 사용한다. 메모리 상에 존재하는 가상 DOM으로 실제 DOM과 별도로 존재한다. 리액트에서 상태가 변경되면 Virtual DOM에서 변경된 요소들만 실제 DOM과 비교하여 변경한다. Virtual DOM을 사용함으로써 브라우저에서 발생하는 리플로우와 리페인트 횟수가 최소화되어 성능을 향상할 수 있다. 

결론만 말하면, 이전에 저장된 Virtual DOM과 새로 생성된 Virtual DOM을 비교하여 변경된 부분의 DOM만 변경하여 실제 DOM에 반영하므로, 불필요한 렌더링을 최소화 하여 효율성을 높일 수 있다.

 

따라서 결론.

Vanilla JS, Jquery 전부 사용해도 좋지만, 동적 UI와 유저 인터렉션 디자인이 아주 중요해진 시대기 때문에 DOM 관리 및 상태 값 업데이트 관리 등의 작업을 최소화 할 수 있게 만들어주는 라이브러리가 React이다.

리액트 짱.