리엑트 렌더링 원리

프론트 엔드 입장에서 렌더링은 html과 css로 웹페이지에 UI를 그리는 과정을 의미한다. 

리엑트에서도 렌더링이라는 과정이 존재한다. 

리엑트의 렌더링

- 브라우저가 렌더링에 필요한 DOM트리를 만드는 과정을 의미한다. 

- 리엑트 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에게 던질지 계산하는 일련의 과정을 뜻함

 

렌더링 발생 타이밍

1. 최초 렌더링 : 사용자가 처음 애플리케이션에 진입시

2. 리렌더링: 최초렌더링 이후 발생하는 모든 렌더링

• 클래스형 컴포넌트의 setSteate가 실행될떼
• 클래스형 컴포넌트의  forceUpdate가 실행될때
• 함수형 컴포넌트의 useState()의 setter가 실행될때
• 함수형 컴포넌트의 useReduver()의 dispatch가 실행될때
• 컴포넌트의 key props가 변경되는 경우
  • 리엑트에서 배열에 key를 사용하지않으면 경고가 뜬다 그 이유는 리런더링이 발생할때 형제요소들 사이에 식별값이 필요하기때문 그래야 두 트리사이에서 변화가 있을때 변경이 있는지 구분할 수 있게됨 만약 key가 없다면 리엑트파이버 내부의 sibling인덱스만을 기준으로 판단하게 된다.
• props가 변경되는 경우
• 부모 컴포넌트가 렌더링 될 경우
  • 부모컴포넌트가 리렌더링된다면 자식컴포넌트도 무조건 리렌더링 된다.

 

위 내용을 보면 알 수 있는것은 상태관리가 되지 않는 변수에 아무리 값이 변경이 일어나더라도 리렌더링은 일어나지 않는다는 것을 알 수 있다.

리엑트를 빌드할때 필수로 패키지에 mobx-react나 react-redux같은 패키지가 필요한 이유는 상태를 관리해 주지만 상태관리가 리렌더링으로 이어지지않고 위 방법중 하나를 활용해 렌더링 시키기때문.

 

랜더링 프로세스

랜더링 프로세스가 시작되면 컴포넌트의 루트에서 부터 차근차근 아래쪽으로 내려가면서 업데이트가 필요하다고 지정돼 있는 모든 컴포넌트를 찾는다. 함수형 컴포넌트는 그자체를 호출하고 결과물을 저장한다. 클래스형 컴포넌트는 render()함수 실행

일반적으로 렌더링 결과물은 JSX문법으로 구성됐는데 이들이 js로 컴파일돼서 DOM을 만들어내고 이를 가상DOM과 실제DOM을 비교해 변경사항을 수집한다. 위와같은 일련의 과정을 Recomciliation 이라고한다. 

Recomciliation이 끝나면 모든 변경 사항을 하나의 동기 시퀀스로 DOM에 적용해 변경된 결과물이 보이게 된다. 이때 자세히보면 단계가 크게 두 단계로 나뉘는데 렌더단계와 커밋단계로 나뉜다.

 

렌더

• 컴포넌트를 렌더링
• 변경사항 계산
• 이전 가상DOM 을 비교해서 컴포넌트 체크
  • 체크하는 값은 크게 type, props, key
  • 위 셋중 하나라도 변경시 변경이 필요한 컴포넌트로 인식

커밋

• 렌더 단계의 변경 사항을 실제 DOM에 적용해 사용자에게 보여주는 과정

커밋을 단계에서 업데이트를 하게 되면 모든 DOM 노드와 인스턴스를 가리키도록 리액트 내부의 참조를 업데이트 한다. 생명 주기 개념이 있는 클래스형 컴포넌트는 componentDidMount,componentDidUpdate 메서드 호출 함수형 컴포넌트는 useLayoutEffect 훅 호출

 

위 내용에서 중요한점은 리액트의 렌더링이 일어난다고 무조건 DOM이 업데이트가 되는것이 아니다 . 렌더링을 수행했는데 커밋 까지 할 필요없다면 (변화가없다면)  커밋은 생략될 수 있다.