리액트 - 구동원리 (렌더링, 리렌더링, 최적화)

리액트는 컴포넌트 기반의 자바스크립트 라이브러리이다. 

 

컴포넌트는 클래스 컴포넌트와 함수 컴포넌트가 있는데, 지금은 함수 컴포넌트를 위주로 사용한다. 

 

렌더링

함수 컴포넌트를 호출하면 가상돔 (virtual DOM) 객체가 생성되는데, 이것을 렌더링 이라고 한다. 

그리고 가상돔에서 변경된 부분만 실제 돔에 반영하는 것을 commit 이라고 한다. 

 

가상돔이 있기때문에 SPA 구현이 가능하고, 유저는 새로고침 시 깜빡임 현상 없이 프로그램을 사용할 수 있다. 

 

[state, setter ] = useState() 함수를 사용해서, state값을 정의하고 초기값을 설정하는데 이때 초기값은 fiber node에 저장이 된다. 

setter 함수는 상태를 변경시키고(fiber node에 저장), 리렌더링을 요청한다. 

그리고 리렌더링이 될때 함수가 호출되고 fiber node에 넣어둔 값을 꺼내서 사용한다. -> 실제 돔에 반영된다. 

 

리렌더링 최적화 

메모이제이션(Memoization) 을 적용해서 리렌더링될때 리소스 부담을 낮춘다? 

React.memo 사용

이전에 렌더링한 부분을 그대로 재사용한다. 

조건에 따라 렌더링 하기도 함.: state나 prop이 달라졌을때 ?

 

리액트에서, 컴포넌트가 호출되어 객체를 생성할때마다 다른 참조값을 갖게되서 서로 다른 객체로 인식이 된다.

useMemo(), useCallback()을 사용해서 같은 객체임을 알려준다. 

 

재조정

이전의 렌더 결과와 현재 렌더 결과를 비교해서 변경된 부분을 갱신하는 것

1. 리렌더링 후 컴포넌트 자체가 달라졌을 때 (상태가 달라졌을때) 

2. 리렌더링 후 컴포넌트 순서가 달라졌을 때 → key 에 고유 식별자를 할당해서 fiber node가 정확한 요소를 참조할 수 있게함.

 

Commit 단계는 실제 DOM을 업데이트하는 과정이고, Reconciliation 단계에서 결정된 변경 사항을 실제 DOM에 적용하는 단계를 말한다. 

즉 commit이 일어나기 전에 재조정이 발생한다고 보면 될 것 같다. 

 

 

 

https://www.youtube.com/watch?v=eBDj0B0HbEQ