[참고 : 리액트 공식 문서]
1단계 : 렌더링 트리거
- 컴포넌트 렌더링이 일어나는 이유
- 컴포넌트의 초기 렌더링인 경우
- 컴포넌트의 state가 업데이트 된 경우
- 자신 또는 자신을 포함한 상위 컴포넌트의 state가 업데이트 됐을 때
근데 사실 나는 이 두가지의 경우가 다르다고 생각하지 않는다🤔
초기 렌더링의 경우에는 state가 없다가 생긴거니까 그 또한 업데이트 됐다고 볼 수 있는 거 아닐까? → 결국 state가 업데이트 됐을 때가 트리거가 일어나는 것이다 로 이해하겠음
2단계 : React component 렌더링
- 렌더링을 트리거(1단계)한 후 컴포넌트를 호출하여 화면에 표시할 내용을 파악함
- 렌더링은 반드시 순수해야 함
- 동일한 입력에는 동일한 출력을 해야 함
- 이전의 state를 변경해서는 안됨
- 렌더링은 반드시 순수해야 함
렌더링은 보통 화면에 그려지는 걸 뜻하는데(painting) 리액트에서는 헷갈리게시리 이 개념은 커밋이라고 하고, 렌더링은 컴포넌트를 호출하는 것을 뜻한다
아마 렌더링이 컴포넌트를 호출하는 것이기 때문에 컴포넌트의 조건인 순수 함수여야 한다는 컨셉이 동일한 거 같다
3단계 : React가 DOM에 변경사항을 커밋
- 렌더링(컴포넌트를 호출) 이후에 React는 DOM을 수정
- 초기 렌더링의 경우
appendChild()DOM API를 생성하여 모든 DOM 노드를 화면에 표시 - 리렌더링의 경우 최소한의 필요한 작업(렌더링하는 동안 계산된것)을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 함
- React는 렌더링간에 차이가 있는 경우에만 DOM 노드를 변경함
정리
- 트리거 → 렌더링 → 커밋
- state 변경으로 렌더 트리거가 일어나서 → 렌더링으로 컴포넌트를 호출해서 이전 DOM/이후 DOM 변경 사항을 파악하고 → 변경 사항이 있다면 화면에 그려줌
- 트리거가 일어났으나 렌더링에서 변경된 게 없다고 확인 됐으면 커밋이 일어나지 않음
