Virtual DOM, Props, state

Virtual DOM, Props, state

---

1. Virtual DOM

• 실제 DOM과 완벽히 구조가 같은 복사본
• 자바스크립트 객체 형식으로 메모리에 저장됨(DOM을 직접 조작하는 것 보다 빠르다.)

1.1. Virtual DOM Version

• 화면이 갱신되기 전 Virtual DOM Object
• 화면이 갱신된 후 Virtual DOM Object(state에 의한 상태 변화)

1.2. Diffing

• 두 가지 Virtual DOM Version의 변경 부분을 react 알고리즘으로 찾아내는 과정

1.3. 재조정

• Diffing 과정이 끝나면 실제Dom에 적용시키는 과정
• Batch update(변경 사항을 모아 한꺼번에 업데이트 시킨다.)
• 배치 업데이트를 통해 painting 작업의 cost가 엄청나게 줄어듬
  

2. Props

Component의 정보 교환 방식으로 부모 자식 관계
즉 부모 컴포넌트가 자식 컴포넌트에게 물려주는 데이터 교환 방식이다.

3. state

현재의 상태를 나타내며 react 리랜더링은 state의 변화를 통해서 인식된다.