리액트) 라이프 사이클 - 1

DOM 이란?

html 단위 하나하나를 객체로 생각하는 모델. 트리 구조로 이루어져 있다.

 

Virtual DOM 이란? (가상돔)

DOM 트리 중 하나가 수정될 때마다 모든 DOM을 탐색해서 수정하는 과정에서 필요없는 연산이 너무 많이 일어난다. 이 문제를 해결하기 위해 등장한 것이 가상돔이다. 가상돔은 메모리상에서 돌아가는 가짜 DOM 이라고 생각하면 편하며, 가상돔에서 바뀐 부분들만 다 수정한 다음 진짜 DOM에 던져준다. 그냥 간단하게 말하자면 DOM 업데이트 처리에 대한 최적화 방법을 자동화하고 추상화한 것이다.

 

하지만, 꼭 가상돔이 더 빠른 것은 아니다. 사이트 구조에 따라서는 DOM 이 더 빠를 수도 있다. 

 

가상돔을 왜 써야하는가에 대한 자세한 설명 : https://velopert.com/3236

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG

 

 

라이프 사이클이란?/

컴포넌트의 라이프 사이클이란 화면에 나타났다가 사라지는 과정을 말하는 것이다.

 

일반적으로 라이프 사이클은 세 단계로 구분할 수 있다.

 

1) 생성될 때 (실제 DOM에 마운트 되는 것. render 과정을 마치면 가상돔에서 실제 DOM 으로 마운트 되었다고 한다.)

2) 업데이트할 때 (사용자의 클릭과 같은 동작에 의하여 컴포넌트 내용이 바뀌면서 DOM 내용이 바뀌는 것)

- props가 바뀔 때 (부모가 나에게 주는 데이터가 바뀌었을 때)

- state가 바뀔 때 (컴포넌트 자신의 데이터가 바뀌었을 때)

- 부모 컴포넌트가 업데이트 되었을 때(=리렌더링 했을 때)

- 또는 강제로 업데이트 했을 때 (forctUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있다.)

3) 제거할 때 (화면에서 아예 빠지는 것. DOM에서 unmount 되는 것.)

- 페이지 이동

- 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계