[FE / REACT] React 렌더링

렌더링이란?

렌더링이란 현재 props 및 상태를 기반으로 코드로 정의된 내용이 실제 브라우저 화면에 그려지는 과정

이때, DOM이란 웹 사이트를 열 때 화면에 표시되는 내용을 마크업 언어인 HTML을 통해 표현하는 것

렌더링 발생 조건

1. 컴포넌트의 상태 변경 (setState 함수 실행할 때 React 트리거 업데이트 됨)
   1. props가 변경되어도 업데이트 되지 않는 이유? props를 setState로 올바르게 업데이트하지 않았거나, props의 참조가 동일할 경우
   2. 혹은 props자체는 부모 컴포넌트가 렌더링 될 때 가져오기 때문에 부모의 렌더링이 일어나지 않으면 props가 교체되지 않음
2. 부모 컴포넌트 랜더링 ⇒ 부모 컴포넌트가 렌더링 될 시 하위 컴포넌트는 모두 렌더링됨(리액트는 기본적으로 컴포넌트를 순회하며 렌더링 하므로)

렌더링 최적화

1. key 사용하기 : 바뀐 부분을 빠르게 캐치해서 해당 부분만 렌더링 할 수 있음. key는 고유하면서 불변하는 값으로 설정해야 함
2. React.memo 사용 : memo로 감싼 컴포넌트가 렌더링 될 때 이전 props랑 현재 props를 비교해서 바뀐 props가 없으면 렌더링 하지 않도록 막아줌
3. useCallback, useMemo 사용 : 렌더링이 일어나면서 변수와 함수들이 재성성됨 만약 부모 컴포넌트에서 정의된 함수나 변수가 있다면 그 인스턴스가 바뀌기 때문에 이를 props로 내려주게 되면 아무리 memo로 자식 컴포넌트를 감싸더라도 리렌더링이 이루어질 수 밖에 없음 이를 방지해줌

렌더링 프로세스

1. 초기 렌더링: 애플리케이션을 처음 로딩할 때, 리액트는 컴포넌트의 렌더 메소드를 호출하여 가상 DOM을 생성하고, 이를 사용하여 실제 DOM을 업데이트
2. 상태(State) 또는 속성(Props) 변경: 컴포넌트의 상태 또는 props가 변경되면, 리액트는 해당 컴포넌트를 다시 렌더링
3. 가상 DOM과의 비교: 변경이 감지되면, 리액트는 새로운 가상 DOM 트리를 생성하고, 이를 이전의 가상 DOM 스냅샷과 비교 (diffing)
4. 차이 계산(Reconciliation): 두 가상 DOM 트리 간의 차이를 계산하여, 실제로 변경이 필요한 최소한의 부분을 파악
5. 실제 DOM 업데이트: 계산된 차이를 바탕으로 실제 DOM을 업데이트