리액트에서의 렌더링 발생

렌더링

 

이전에 브라우저 렌더링 과정에 대해서 배운적이 있는데 리액트에서도 이와 유사하게 렌더링이 이루어지곤 한다.

 

리액트에서 렌더링(Rendering)은 컴포넌트가 state와 props의 값을 기반으로 UI를 생성하고 DOM에 결과를 업데이트하는 과정이다.

 

리액트에선 크게 3가지 방법으로 렌더링이 발생하곤 한다.

1. 초기 렌더링 : 컴포넌트가 처음 화면에 나타날 때 발생

 

2. 업데이트 렌더링 : 상태(state)나 속성(props)가 변경될 때 발생

- setState가 실행되는 경우

- useState의 setter가 실행되는 경우

- useReducer의 dispatch가 실행되는 경우

- 컴포넌트의 keyprops가 변경되는 경우

 

따라서 key를 임시의 index로 지정하면 안되는경우가 이 경우에 해당된다

 

3. 강제 렌더링 : forceUpdate()와 같은 메서드를 통해 강제로 발생

 

 

리액트 렌더링 발생 과정

 

1. 컴포넌트의 루트에서 아래로 내려가며 업데이트가 필요하다고 지정된 컴포넌트들을 찾음

 

2. 찾았다면, class형의 경우 render을. 함수형의 경우 Component()자체를 호출하고 저장함

 

3. 각 컴포넌트의 렌더링 결과물을 수집해 가상DOM과 비교해 실제 DOM에 반영할 변경사항을 수집

 

4. 변경사항을 동기 시퀀스로 DOM에 적용해 변경된 결과물이 보이게 됨

 

 

렌더, 커밋 (렌더링의 두 단계)

 

1. 렌더 : 컴포넌트를 렌더링, 변경사항을 계산하는 작업
   1. 컴포넌트 실행 후 결과와 이전 가상 DOM을 비교하는 과정을 거쳐 변경이 필요한 컴포넌트를 체크하는 단계
   2. 비교요소 : type, props, key (하나라도 변경되는 것이 있다면 변경이 필요한 컴포넌트로 체크 됨)
      
      
2. 커밋 : 변경사항을 실제 DOM에 실제 적용해 사용자를 보여줌
   1. 업데이트 된 DOM 노드, 인스턴스를 가리키도록 리액트 내부의 참조를 업데이트 함.
      1. 클래스 컴포넌트의 경우 componentDidMount, componentDidUpdate 메서드를 호출
      2. 함수형의 경우 useLayoutEffect 훅을호출

리액트의 렌더링은 반드시 DOM 업데이트를 발생시키지 않음

• 렌더링은 수행했으나, 커밋단계는 필요 없는 경우 생략이 가능함.

 

 

추가로, 컴포넌트를 렌더링하는 작업은 별도의 렌더링을 피하는 작업이 없다면 하

위 모든 컴포넌트에 영향을 끼침

• memo로 래핑하는 경우 렌더링이 발생하지 않음
• 렌더단계에서 비교는 거쳤으나, memo로 선언했기에 props가 변경되지 않으면 렌더링이 생략되어 커밋단게가 생략된 것임

 

---

해당 글은 모던 리액트를 읽고 작성했습니다

https://m.yes24.com/Goods/Detail/123161563

모던 리액트 Deep Dive - 예스24