React의 작동 원리

하나의 부모 컴포넌트와 해당 부모 컴포넌트 안에서 실행되는 하나의 자식 컴포넌트가 있는 React App이 있다고 가정하자.

1. React App이 최초 실행될 때 부모 컴포넌트 안의 모든 함수가 정의되고 더불어 선언한 state도 생성된다.
2. 부모 컴포넌트의 render(함수 컴포넌트의 return 구문) 함수가 실행되고, render 함수 안의 모든 UI가 VirtualDOM에 등록된다: execution or re-executaion
3. 실행 흐름은 자식 컴포넌트로 이어져 부모 컴포넌트가 전달한 props를 받는다. 이후 부모 컴포넌트와 똑같이 자식 컴포넌트 안의 모든 함수가 정의되고 state도 생성된다: execution or re-executaion
4. 자식 컴포넌트의 render 함수 안 모든 UI가 VirtualDOM에 등록된다.
5. React가 등록이 끝난 VirtualDOM과 브라우저의 RealDOM을 비교한다.
6. 최초 실행의 경우 모든 UI가 새 것이므로 RealDOM에 모든 UI가 그려진다. 최초 실행 이후의 실행일 경우 VirtualDOM과 RealDOM을 비교하여 달라진 부분만 업데이트 한다: evaluation or re-evaluation