리액트에서 최적화를 위해 사용되는 메모이제이션에는 세가지 방식이 있다.
메모이제이션
컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수 행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.
React.memo
컴포넌트를 메모이제이션 하는 방식
props가 동일한 상태일때 사용해서 성능최적화를 누릴 수 있다.
ex) 게시글이 [1,2,3] + [4] 한가지만 추가 될 때 이전의 값들은 동일한 값을 계속 전달받는 중
.map으로 그려지는 컴포넌트들한테 사용하는 예시가 있다.
React.memo를 사용하여 동일한 props로 랜더링하게 된다면 컴포넌트는 새롭게 랜더링하지 않고 마지막으로 랜더링 된 결과를 재 사용한다.
memo를 사용했더라도 props가 다시 바뀐다면 사용하는 의미가 없다.
function MyComponent(props) { /* props를 사용하여 렌더링 */ } export default React.memo(MyComponent);
console.log 로 랜더링 될 때 값을 찍어보게되면 아래와 같이 확인해볼 수 있다
- 기존 값 [1,2,3] 있는데 4가 추가 되었을 경우
a.memo O[1,2,3] , 4, ...
b.memo X[1,2,3] , 1,2,3,4, ...
useCallback
useCallback은 함수자체 를 기억
컴포넌트가 랜더링 될 때마다 함수는 다시 생성된다.
함수생성자체가 비용이크면 그 함수를 기억해두도록 useCallback에다가 넣어놓는다.
React.memo를 해놓았어도 props로 전달해준 함수가 계속 생성되기 때문에 props가 동일하다고 인식되지 않아 적용되지 않는다.
자식컴포넌트에 함수를 프롭스로 넘길때는 useCallback을 꼭 해주어야한다.
왜냐하면 useCallback이없으면 매번 새로운 함수가 생성되기때문이다.
그러면 props로 새로운 함수를 전달되면 자식 컴포넌트는
부모로부터 받은 props가 바뀌었다고 인식해서 새로 랜더링을 해버리기때문에 손해다.
- 인라인 방식으로 함수를 props 내려주게되면 랜더링 될 때마다 함수가 계속 생성된다
useMemo
useMemo의 두번째 인자가 바뀌지 않는 한 다시 실행되지 않음
===
두번째인자가 바뀌기 전까지는 계속 같은값을 가지고있는다
useMemo 복잡한 함수 결과 값(리턴 값) 을 기억
hooks는 전체가 다같이 재실행되기때문에
함수 실행환 결과값을 기억하려면 유스메모
다시한번 짚고가는 리랜더링 될 때
- state 값이 바뀔 때
- props 바뀔 때
- 부모컴포넌트가 바뀔 때
새로운 props를 전달받지 않더라도 부모컴포넌트가 리렌더링 된다면 자식컴포넌트도 리렌더링이 된다
