React의 성능올리기.

오랜만의 포스팅이다 이제 다시 포스팅을 짬짬이 조금씩이라도 해보려한다.

 

현재 react 프로젝트를 진행중이라 react에 관한 포스팅을 기재한다.

 

자 react는 virtual Dom을 사용한다. 뭐가 좋은가 virtrual DOM을 브라우저의 memory에 올려 브라우저의 Dom을 변경하기 전에

이전 v-dom과 현재의 v-dom을 비교해서 바뀐 최소 부분만 반영을 한다. 그러니 랜더링 과정이 최소로 이루어지고 이를 자식 노드까지 반복한다. 모든 비교가 끝나면 Dom Tree에 반영!

 

비교하는 Elem이 바뀐 경우 이전 v-dom을 제거하게 된다. (컴포넌트 윌 언마운트, useEffect 정리)

이때 모든 자식들도 제거되고 재생성 된다.

 

elem이 같다면 prop을 수정한 뒤 자식들의 노드를 비교한다.

이때 key를 가진 자식들의 이전과 변경되는 key를 비교한다 (그래서 key를 입력하라고 그렇게 강조하는 것 인가 보다)

key가 있으면 비교를 진행한다.

 

자 이렇다 react는 v-dom으로 실제 dom에 반영하는 빈도를 줄여 성능을 극대화 시킨다.

 

어떻게 component를 만들고 배치하느냐에 따라 차이가 극명하다.

 

react의 v-dom의 rerenderingdms 4가지 상황에서 발생한다

 

1. 부모 component가 rendering되서 자식을 비교할 때

2. prop이 변경되었을 때

3. state가 변경 되었을 때

4. forceUpdate가 호출 되었을 때

 

거대한 웹을 만들면 tree가 깊어지고 자식들이 많이지면 비교해야 하는 코드도 많아진다.

component의 props정보를 저장해두고 동일한 prop가 입력되었을 때 재 랜더링을 막는다면 성능을 올릴 수 있다.

이런 것을 memorization이라고 한다. 이는 입력한 결과를 저장하고 동일한 입력이 발생했을 때 동일한 결과를 빠르게 반환하는 기법이다.

Class component에서는 shouldComponentUpdate를 제공한다. 이는 이전 데이터와 다음 데이터를 비교하여 랜더링 여부를 결정할 수 있다.

shouldComponentUpdate는 update시점의 componentWillupdate 이전에 발생한다.

이를 이용하면 불필요한 reredering을 막을 수 있다.

 

자 그럼 function component는 어떻게 해야하는가?

React.memo 가 ㅇㅆ다고 한다 React.memo는 컴포넌트와 PropsAreEqual(비교함수)를 받아 Component 를 반환하는 HOC이다.

 

React.memo는 PropsAreEqual이 false일때 rendering을 한다.

그러나 자주 변하는 props의 경우 오히려 비교하는데 많은 공수가 들어 이점을 얻기 힘들 수 도있다.

 

 

inline function을 주의하자 예로 onClick의 경우 rendering시점에서 생성되고 만약 state의 변경으로 재랜더링이 일어나면 onClick에 새로운 function을 생성해서 props로 전달하게 된다. 이때 memorization을 했던 자식 컴포넌트도 rerendering이 일어나기에

주의하자.

 

이때 필요한 것은 useCallback과 useMemo인데 memorization된 값을 반환하는 hook이다.

이를 이용해서 같은 props를 자식에게 전달하여, rerendering을 막을 수 있다.