Virtual DOM, Life Cycle, Hooks 그리고 State Management

React를 잘 다루기 위해선 Life Cycle을 이해해야 한다

 

리액트를 잘 다루기 위해서는 리액트의 탄생배경, 그리고 그에 따른 설계컨셉과 디자인들 순으로 이해를 해야 한다. 

 

 

1. Virtual DOM

리액트라는 것은 왜 만들어졌는가? UI적인 이유도 있겠지만, Virtual DOM이 리액트의 탄생배경이라고 생각한다. JavaScript로 프론트를 동적으로 구성하다 보니, 점차 JavaScript가 HTML 요소를 점점 더 많이 건드리기 시작했다. JavaScript는 본래 이름이 LiveScript일 만큼, HTML이라는 문서를 동적으로 만들고 싶어서 탄생한 언어인데, 문제는 이 JavaScript라는 것이 너무나도 많은 HTML 요소를 건드리기 시작하면서 문제가 발생하였다.

 

그래서 JavaScript가 HTML 요소를 좀 더 적게 건드리게 할 수 없을까라는 고민해서 나온 컨셉이 Virtual DOM이다. 기존의 JavaScript가 HTML 요소를 건드릴 수 있는 이유는 DOM API가 존재하였기 때문이다. 문서객체모델이라는 인터페이스를 통해서 JavaScript와 HTML이 서로 영향을 주고 받을 수 있었던 것인데, 이번에는 Vitual DOM이라는 것을 고안하였다.

 

JavaScript가 직접적으로 DOM을 만지기 이전에 먼저 Virtual DOM을 거치는 것이다. 가상의 문서객체모델이 존재해서, 이것을 먼저 건드리게 한다. 그런 다음 가상의 문서객체모델(Virtual DOM)과 실제 문서객체모델(DOM)을 비교하게 한다. 비교한 결과, 차이가 있는 부분만 JavaScript가 건드리게 하고, 다르지 않은 부분은 건드리지 못하게 한다.

 

 

 

2. Life Cycle

이렇게 Virtual DOM이라는 것을 통해, JavaScript가 HTML을 과도하게 건드려서 느려지는 문제를 해결할 수 있었다. 헌데 앞에서 설명한 바와 같이 가상의 DOM과 실제의 DOM을 비교하고, 달라지는 부분을 체크하고, 달라지는 부분만 렌더링해주는 이러한 일련의 과정을 거치게 되면서, Life Cycle이라는 개념이 탄생하게 되었다. 

 

어떻게 보면 처음부터 Life Cycle이라는 컨셉을 의도해서 만든 것이 아니라, Virtual DOM과 실제 DOM을 비교하면서 렌더링해주는 과정을 거치다 보니 React라는 라이브러리에 Life Cycle이 생긴 것이다.

 

 

 

3. React Hook

Virtual DOM과 실제 DOM을 비교한 후에 렌더링 하는 과정을 거치면서, LifeCycle이 생기게 되었는데, 여기서 또 하나의 컨셉이 들어간다. 어차피 실제로 화면을 렌더링해주기까지 어떠한 과정을 거치게 되는데, 중간중간에 조작을 가할 수 없는가에 대한 의문이 제기된 것이다.

 

위의 첨부된 사진을 보면, Virtual DOM에서 실제 DOM까지 Mounting, Updating, Unmounting이라는 일련의 과정을 거친다. 이 때 중간중간에 어느 정도 조작을 가할 수 있는 부분이 존재하고, 그래서 탄생한 도구가 React Hook이다. Hook이라는 말이 시사하듯, 중간중간의 과정을 낚시바늘처럼 낚아채서 조작을 가하는 것이다. 

 

 

 

4. State Management

React Hook이라는 녀석이 등장하면서 또 하나의 문제가 발생한다. Virtual DOM에서 시작하여 실제 DOM에 이르기까지 Life Cycle이라는 과정이 있었고, 이 과정 속에서 중간중간 조작을 가하기 위해 Hook이라는 컨셉이 등장하였다. 문제는 이 Hook이 조작을 가하는 부분이 많아지기 시작하면서, 수많은 Hook을 관리해야할 필요성을 느끼게 되었다.

 

대표적인 Hook으로 useState가 있는데, Life Cycle 상에서 수많은 useState Hook이 조작을 가하면서, 이러한 Hook들을 모아서 관리하고자 하였고, 이에 따라 State Management라는 개념이 각광받게 된다.

 

State Management는 말그대로 여러 Life Cycle에 걸쳐서, 혹은 같은 단계라도 그 단계 속에 있는 수많은 Hook들을 한 곳에서 관리하고자 하는 컨셉이다. 다른 용어로는 Data Layer라고도 부른다. 수많은 Hook을 하나의 Layer로 감싸서 관리하는 것이다.

 

 

 

엔지니어링은 오히려 역사적으로 접근해야 한다. 어떠한 문제가 있고, 그 문제를 해결하기 위한 어떠한 컨셉과 디자인이 등장하였으며, 그러한 컨셉과 디자인을 활용하는 것이 엔지니어링이라 생각한다.