[React] Virtual DOM과 react life cycle

[React] react life cycle과 virtual DOM

 

react는 가장 인기 있는 javascript framework이다. cloud flare의 2023 통계에 따르면 react가 점유율 38%로 압도적인 1위를 달리고 있다. 나는 react를 어느 정도는 사용할 수 있지만, 더 잘 사용하기 위해서는 기초적인 개념을 더 깊게 이해할 필요가 있다고 생각했다. 따라서 이 글에서는 react의 중요한 개념인 life cycle과 virtual DOM에 대해 알아보겠다.

cloud flare의 2023 사용량 통계

 

Virtual DOM

vitual. 가상이라는 뜻이다. 브라우저의 렌더링 엔진이 DOM 트리를 기반으로 화면을 렌더링 하는 것은 알겠는데.. 가상 돔은 무엇일까?

 

여기 감성돔 한 마리가 있다. 이 감성돔을 꾸며주려고 하는데, 실제 감성돔에 모자를 씌웠다가.. 바퀴를 달았다가.. 별도 붙여주고 이런 과정들을 일일이 반복한다고 해보자. 감성돔은 아마 굉장히 스트레스를 많이 받을 것이다. 심각한 경우에는 감성돔이 죽어버릴지도 모른다. 감성돔 모양의 인형을 만들어서 장식을 테스트한 후에 실제 감성돔에 한 번에 적용시킨다면? 감성돔은 스트레스를 덜 받을 것이다.

실제 감성돔

감성돔 모양의 인형

꾸며진 감성돔

 

virtual DOM도 동일한 이유로 만들어졌다. 만약 javascript로 직접 DOM을 만진다면, 변경사항이 생길 때마다 reflow와 repaint가 일어난다. reflow와 repaint는 굉장히 큰 비용을 소모하여 어플리케이션에 부담이 간다. (이 내용이 궁금하다면 아래 게시글을 참고하자.)

[CSS, CS] 왜 translate를 사용해야 할까? 브라우저 렌더링 과정!

 

reflow와 repaint를 최대한 적게 발생하도록 하려면, 동시에 발생한 변경사항들을 모두 모아 한 번에 DOM에 반영해야 한다. 그런데 pure javascript로 이 기능을 구현하는 것은 쉬운 일이 아닐 것이다.

 

react는 virtual DOM을 사용하여 실제 화면에 렌더링 하는 process를 가진다. component에서 변경사항이 발생하였다면, 변경사항이 적용된 virtual DOM을 구축한다. 그리고 기존에 있던 virtual DOM과 새롭게 생긴 virtual DOM의 차이를 비교한다. 마지막으로 실제 DOM에 이 변경사항을 적용한다.

 

이런 process로 DOM 수정 최소화가 가능하다. 더 자세히 들어가 보자. component의 state가 변경되었다면, react는 render parse를 다시 실행하며 업데이트가 반영된 새로운 virtual DOM을 생성한다. 이 virtual DOM은 실제로는 객체이며, 각 component는 재귀호출로 렌더링 된다.

 

각 component는 fiber node라는 것을 가지는데 여기에 component의 state가 저장된다. 우리가 map으로 element를 생성할 때에 key값이 필요한 이유가 바로 각 fiber node와 각 element를 길을 잃지 않고 연결해 주기 위해서이다. 

 

기존에 존재하던 virtual DOM과 새롭게 생성된 DOM을 비교하여 변경사항을 확인하고, 이를 실제 DOM에 적용하는 commit parse 과정을 거친다. 이 과정을 reconciliation이라고 한다.

 

기존의 DOM과 새로운 DOM과 같은 동일한 형태가 두 개 존재하는 형태를 더블 버퍼링 구조라고 한다. 이런 구조가 적용되는 이유는 원본과 작업 중인 구조를 분리하기 위해서이다.

 

 

virtual DOM에 대해 배웠으니 이제 react의 life cycle도 이해할 수 있다!

 

Life Cycle

reac의 life cycle은 component가 생성되고, 업데이트되고, 삭제되는 과정을 나타낸다. life cycle의 메서드들을 component의 다양한 상황에 맞춰 사용된다.

 

1. Mount

먼저 component가 생성되는 시점을 mount라고 부른다. component가 DOM에 삽입될 때 발생하는 단계이다. 이 단계에서는 component가 생성되어 렌더링 되고, 필요한 리소스를 요청하는 것과 같은 작업이 일어난다.

 

2. Update

다음은 component가 생성되어 DOM에 존재하는 동안의 시점인 update이다. component의 state가 변경되고 그에 따라 component가 리렌더링 되는 등의 동작이 발생한다.

 

3. Unmount

마지막으로 component가 DOM에서 제거되어 사라지는 시점은 unmount이다. 상위 component에서 더 이상 하위 component를 사용하지 않는다면 제거된다. component의 unmount 직전에 componentWillUnmount 함수가 실행된다. 마지막 발악이다.

 

 

마치며

오늘은 이렇게 react의 virtual DOM과 life cycle에 대해 알아보았다. life cycle을 알아보니 특히 component가 너무 불쌍한 존재처럼 여겨졌다. 필요할 때는 불려 와 mount 되었다가 update 과정에서 부려먹어 지고 필요 없어지면 unmount 되는.. 토사구팽과 다를 게 없다.