[짜잘한 리액트] 리액트 요소와 가상돔

리액트 요소와 가상돔
1. 리액트 요소 트리
2. element 구조

7. 리액트 요소와 가상돔
리액트는 메모리에 가상돔을 올려 놓고 이전과 이후의 가상돔을 비교하고 변경된 부분만 실제 돔에 반영한다.

1. 리액트 요소 트리

• 리액트에서 데이터 변경에 의한 화면 업데이트는 랜더 단계와 커밋 단계를 거친다.
  • 랜더 단계 : 실제 돔에 반영할 변경사항을 ‘파악’하는 단계
  • 커밋 단계 : 파악된 변경 사항을 실제 돔에 ‘반영’하는 단계
  • 랜더 단계에서는 변경 사항을 파악하기 위해서 가상 돔을 이용한다. 가상돔은 리액트 요소로부터 만들어지고 리액트는 렌더링할 때마다 가상돔을 만들고 이전 가상돔과 비교를 한다.
  • 이는 실제 돔의 변경 사항을 최소화하기 위한 과정이다

2. element 구조
1) seconds 값이 1초마다 바뀌는데, p 태그 안의 {seconds} 부분만 변경된다.
2) 만약에 div 태그 key값에 seconds를 주게되면 div 돔 요소가 1초마다 삭제되고 다시 추가된다.
3) 이렇게 key를 변경하면 리액트는 이것을 다른 요소라고 판단을 해서 이전 것을 삭제하고 새로 만들어서 붙인다.
4) 돔 요소 말고 컴포넌트의 key를 변경할 때는 어떻게 될까?
- 컴포넌트의 key를 변경하게 되면 해당 컴포넌트는 삭제 되었다가 추가된다.
- 이렇게 컴포넌트가 삭제되는 것을 Unmount라고 부르고 컴포넌트가 추가되는 것을 Mount라고 부른다.
- 컴포넌트가 Mount될 때는 useState의 첫 번째 매개변수로 입력된 초기값이 상태값으로 할당이 된다. 즉, 초기화가 된다는 것이다. 따라서 1초에 한 번씩 0이 새롭게 할당된다.
- 이렇게 key를 변경하면 컴포넌트는 Unmount와 Mount를 반복한다.