React 동작 과정 및 LifeCycle 간단 정리

마운트 될 때

1. JSX 가 작성된다.
2. 해당 JSX 를 React Element로 변환한다. (Render Phase)
3. React Element를 VDOM에 올려놓는다. (Render Phase)
4. VDOM 과 실제 DOM을 비교하여 변경사항을 찾는다. (Render Phase & 재조정)
5. 실제 DOM에 변경사항을 반영한다. (Commit Phase)
6. 브라우저에 페인트 된다.

업데이트 될 때

1. setState나 prop 업데이트 등이 일어나면 해당 작업이 재조정을 트리거하는 스케쥴러에 등록된다.
2. 해당 작업을 실행하게 되면.. Render Phase 로 돌입한다.
3. React Element를 VDOM에 올려놓는다. (Render Phase)
4. VDOM 과 실제 DOM을 비교하여 변경사항을 찾는다. (Render Phase & 재조정)
5. 실제 DOM에 변경사항을 반영한다. (Commit Phase)
6. 브라우저에 페인트 된다.

위의 과정에서 라이프사이클을 더해보자.

마운트 될 때

1. JSX 가 작성된다. constructor & getDreviedStateFormProps
2. 해당 JSX 를 React Element로 변환한다. (Render Phase) render
3. React Element를 VDOM에 올려놓는다. (Render Phase) render
4. VDOM 과 실제 DOM을 비교하여 변경사항을 찾는다. (Render Phase & 재조정) render
5. 실제 DOM에 변경사항을 반영한다. (Commit Phase) react Update dom & ref
6. componentDidMount

업데이트 될 때

1. setState나 prop 업데이트 등이 일어나면 해당 작업이 재조정을 트리거하는 스케쥴러에 등록된다. getDreviedStateFormProps
2. 해당 작업을 실행하게 되면.. Render Phase 로 돌입한다. shouldComponentUpdate
3. React Element를 VDOM에 올려놓는다. (Render Phase) render
4. VDOM 과 실제 DOM을 비교하여 변경사항을 찾는다. (Render Phase & 재조정) render
5. 실제 DOM에 변경사항을 반영한다. (Commit Phase) react Update dom & ref
6. componentDidUpdate