💭가상 DOM과 Life cycle의 중요성에 대해서

가상 DOM과 Life cycle의 과정을 통해서 리액트가 어떻게 동작되는지, DOM이 어떻게 우리가 보는 화면을 조작하는지 알 수 있기 때문에 가상 DOM과 Life cycle은 매우 중요한 개념이다.

웹 페이지에 눈에 보이다가 사라질 때 까지의 한 과정을 생명주기(Life cycle) 라고 한다.

Life cycle에 대해 알아보기 전, DOM과 가상돔에 대해 먼저 정리해보자!

📌 DOM(Document Object Model)

DOM은 HTML 단위 (ex: div) 하나 하나를 객체로 생각하는 모델로,

텍스트 노드, 자식 노드 등 하위의 어떤 값을 가지고 있는 트리 구조 형식이다.

즉 DOM은 HTML 코드를 해석해서 요소들을 트리형태로 구조화하여 표현하는 데이터이다.

DOM의 단점

DOM 트리 중 하나가 수정 및 업데이트가 되면, DOM은 트리구조이기 때문에

새로운 요청이나 변경사항이 발생할 때 마다 매번 리렌더링을 하여 속도가 느려지고 성능 이슈가 발생한다는 단점이 있다.

예를 들어서 토글 버튼을 클릭하면, 단순히 버튼 1개를 클릭했을 뿐인데

3가지 요소가 화면에 나타나는데,
실시간으로 DOM을 뒤져서 찾고, 수정되거나 변화가 일어난 부분을 찾아서 list들이 생겼다 없어졌다 하는 연산을 컴포넌트 3개가 다 하고 있는 것이다.
이렇게 되면 너무 많은 연산이 발생된다.

이러한 DOM의 단점때문에 생긴 것이 가상돔이다

📌 가상 DOM (Virtual DOM)

진짜 DOM이 있으면 똑같은 가상DOM을 만든다.

이 가상 DOM은 눈에 안보이며, 메모리 상에서만 돌아간다.(눈에 보이는 것이 진짜 DOM)

state, props 등이 변경 되어 값을 갱신했을 때, 값을 가상 DOM에만 전부 올려놓는다.

그리고 마지막에 진짜 DOM과 가상DOM을 비교하여 바뀐 부분만 진짜 DOM에 반영한다.

이것이 React에서의 가상DOM 개념이다.

정리하자면

진짜 DOM은 처음 페이지에 진입했을 때 한번 화면을 그려준다.

그리고 데이터가 변했을 때 가상 DOM에 변한 부분이 올라간다.

그 후 진짜 DOM과 가상DOM을 비교하여 변경된 부분만 진짜DOM에 반영된다.(이때도 진짜 DOM이 한번 건드려지는 것)

이렇게 가상DOM을 사용하면 진짜 DOM을 매번 업데이트 하는 것 보다 연산이 적기 때문에, 확연히 빠르고 간결하게 DOM을 업데이트 할 수 있다.

그렇다면 DOM은 느릴까?

반은 맞고 반은 틀리다.

가상 DOM을 사용하면 실제로 DOM을 건드리는 횟수는 줄어든다.

가상DOM은 계속 뭔가를 업데이트 해줄 것이고, 반영하기 위한 뭔가를 만들어야 하기 때문에, 이 연산이 분명히 들어간다.

따라서 사이트 구조에 따라서 다르다

예를 들면 위에 예시를 든 토글 같은 경우도 토글 리스트를 생기고 사라지게 할 때 리스트를 개별로 생기고 사라지게 하는게 아니라, div 하나로 감싸서 div를 없앴다 생겼다 하게 하면 연산이 많이 들지 않는다.

따라서 때로는 기존 DOM에서 변경 사항을 바로 반영해주는 것이 더 빠를 수도 있다.

📌 생명주기 (Life Cycle)

화면에 컴포넌트가 나타났다가 사라지기까지의 한 과정을 생명주기(life cycle)라고 한다.

컴포넌트의 생명주기는 크게 3단계로 구분 할 수 있다.(생성 될 때, 업데이트 할 때, 제거 할 때)

용어로 과정을 정리해보자면

1. 생성 될 때

실제 DOM에 얹혀지는 것으로 마운트(mount)라고 한다.

• constructor는(class에서 나오는 개념) 생성자 함수로, 컴퍼넌트를 생성할 때 사용하는 함수 인데, 생성할 무언가를 초기화해 줄 때, 컴포넌트에 필요한 값을 넣어줄 때 사용한다.

• render는 가상DOM에서 바뀐 부분이 DOM으로 올라가는 것을 render라고한다.

• 이 render가 완료되면 “mount되었다”라고 한다. 이것을 componentDid-Mount 라고 한다.

2. 업데이트 할 때

사용자의 클릭, 어떠한 동작의 발생 등 컴포넌트의 내용이 바뀌는 것은 그냥 업데이트라고 한다.

• New props (부모 컴포넌트가 자식한테 주는 데이터가 변경됐을 때), setState() (부모 컴포넌트가 가진 데이터를 바꿔주는 것), forceUpdate() (강제로 업데이트를 일으키는 것), rerendering (부모 컴포넌트가 업데이트 되었을 때 발생) 등 어떤 경우에의해 컴포넌트가 수정되었을 때 업데이트가 일어나는데,

  re rendering했을 때 업데이트 되는 이유
  DOM은 트리 구조다.
  트리 구조상 부모 컴포넌트가 바뀌면 자식 컴포넌트도 영향을 받아 바뀌기 때문이다

• 이 때 가상DOM에서 변경된 부분을 DOM에 옮겨 갈아끼운다(Render)
• 그리고 나서 컴포넌트가 업데이트 되는데 이것을 componentDidUpdate라고 한다.
• 업데이트하면 리렌더링된다.
  
  

3. 제거 할 때

화면에서 컴포넌트가 DOM에서 아예 빠져버리는 것으로 unMount라고 한다.

• 컴포넌트가 제거될 때, 컴포넌트가 사라진다는 메서드가 한번 실행된다.
  
  
  
  

---

What I Learned?

✅가상돔이란?

메모리에 올라가 있는 가짜DOM에 변경사항을 다 넣고, 마지막에 진짜 DOM과 비교하여 바뀐 부분만 기존 DOM에 갈아 끼워 넣어 주는 것!

✅가상DOM을 사용하는 이유

가상DOM을 사용하여 변경된 부분만 기존 DOM에 갈아 끼워주면 DOM업데이트 처리가 빠르고 간결해지기 때문에 사용한다.

✅가상DOM이 DOM보다 무조건 빠를까?
항상 가상DOM이 더 빠른 것은 아니다🙅‍♀️
가상 DOM을 사용하면 실제로 DOM을 건드리는 횟수는 줄어들지만, 데이터가 변경될 때 마다 가상DOM에도 연산이 추가되기때문에 사이트 구조에 따라
가상 DOM이 더 빠를 수도 아닐 수도 있다.

✅ DOM이 새로 렌더링 되는 경우

1. 처음 페이지 진입했을 때
2. 데이터가 변했을 때
   
   

✅ 생명주기(Life Cycle)의 3단계 (수정중)

✅ new props vs re-rendering(수정중)

• new props는 부모 컴포넌트가 자식 컴포넌트한테 주는 데이터가 변경 되는 것이다
• re-rendeing은 부모 컴포넌트가 업데이트 되는 것이다.
  
  

✅ 모든 것을 외울 필요는 없지만 아래 2가지는 외워야한다.

• 가상DOM이 먼저 업데이트 되고, 바뀐 부분만 찾아서 진짜 DOM을 업데이트 한다는것,
• 생명주기(Life cycle)에서 컴포넌트는 크게 생성되고 수정되고 지워지며, 수정되는 경우는 컴포넌트 자신의 데이터(state)가 바뀌었을 때, 부모컴포넌트가 자식 컴포넌트에게 주는 데이터가 바뀌었을 때(props가 바뀌었을때), 부모 컴포넌트가 리렌더링 되었을 때. 강제로 업데이트를 일으켰을 때, 총 4가지 경우에 컴포넌트가 업데이트 된다는 것
  

What I Will?

✅ npm, yarn 에 대해서 공부해봐야겠다는 생각이 들었다

내용 중 잘못된 부분이 있다면 댓글로 알려주신다면 감사하겠습니다!😊