ReactDOM과 RealDOM의 차이
html구조를 가지고있는 것이 RealDOM이다.
함수형구조를 가지고있는것이 ReactDOM이다.
state props context 등등이 바뀌면 컴포넌트가 재실행, 재평가된다. 그렇다고 RealDOM이 항상 바뀌지는 않는다. ReactDOM에서 바뀐 부분만 캐치하고 RealDOM을 바꾼다.
자식 컴포넌트 재평가시
그림은 컴포넌트 트리를 그린 것이다.
D와 E에서 props가 바뀌면 바뀐 컴포넌트만 재 실행되는데, 그 props를 C에서 관리하고 있으므로 C부터 D,E가 재실행된다.
그런데 E의 props가 바뀌지 않는다고 해도 E는 재평가 될것이다. 왜냐하면 C가 재평가되면 그 자식 컴포넌트들은 전부 재평가 되기 때문이다.
재평가 막기 :
React.memo(Component)
만약 E의 props가 바뀌지 않는다고 가정하면 E는 재평가될 필요가 없다. 따라서 컴포넌트를 export하는 부분에서 export default React.memo(E); 를 하면 재평가 되는 것을 막을 수 있다.
하지만 모든 컴포넌트들을 이런식으로 최적화하는것은 옳지 못하다. 왜냐하면
- 일반적인 경우 : 바뀐 부분이 있는지 확인하고 재평가
- memo : props 정보들을 저장하고 비교
이기 때문에 props정보가 많고 자식 컴포넌트가 적을 경우에는 비 효율적이다. 따라서 자식컴포넌트가 상당히 많고 props가 적은 상위 컴포넌트에서 memo를 사용할경우 효율이 올라갈 수 있다. (가지치기의 개념)
memo가 통하지 않는 곳
D와 E에서 둘다 memo를 사용하고, 또 props가 변하지 않는다고 가정해보자. 그렇다면 D와 E 둘다 재평가될 일이 없다. 하지만 E는 리렌더링될것이다. 그 이유는 다음과 같다. javascript에서 지원하는 객체와 참조값의 차이인데 true === true 이면 ture를 반환할 것이다. 하지만 참조값인 함수와 배열 같은 경우에는
[1,2,3] === [1,2,3]을 해도 false를 반환한다.
useCallBack()으로 memo 활용하기
함수는 참조값이기 때문에 memo 기능을 사용하더라도 항상 함수가 재생성 된다고 했었다. 하지만 useCallBack()을 사용하면 함수도 한번만 생성되게 할 수 있다.
const functionName = useCallback(() => {
//function contents
},[/* dependency */])dependency 가 필요한 이유
함수 내용중에 if( somestate ) { } 와 같은 내용이 있다면 somestate의 상태에 따라 함수가 바뀌어야하는데 dependency를 등록해놓는다면 state가 바뀔때마다 함수를 재 정의 할수 있다.
useState스케쥴링 & 함수형 리턴
setState((prev)=>prev+1) 와 같은 형태로 작성(이전 state에 의존한다면)
useMemo()사용하기
useCallBack 훅은 함수를 저장하는데 썼다면 useMemo() 훅은 배열을 저장하는데 사용할 수 있다.
