memoization?
성능 최적화를 위한 기법으로, 컴포넌트가 불필요하게 재렌더링되는 것을 방지하는데 사용된다.
주로 React.memo와 useMemo, useCallback 훅을 통해 구현된다.
메모이제이션은 이전 결과를 저장하여 동일한 입력에 대해
계산을 다시 하지 않고, 저장된 결과를 반환함으로써 성능을 향상시킨다.
1. React.memo
함수형 컴포넌트를 메모이제이션하며, props가 변경되지 않는 한
해당 컴포넌트를 다시 렌더링하지 않도록 한다.
얕은비교를 사용하여 props의 변경 여부를 체크한다.
2. useMemo
useMemo 훅은 계산 비용이 큰 값을 메모이제이션하여,
의존성 배열의 값이 변경될 때만 재계산 한다.
이를 통해 불필요한 계산을 줄이고 성능을 개선할 수 있다.
3. useCallback
userCallback훅은 함수를 메모이제이션하여,
의존성 배열의 값이 변경될 때만 새로운 함수를 생성한다.
주로 자식 컴포넌트에 콜백함수를 props로 전달할 때 유용하다.
개념 정리
React.memo : 컴포넌트의 props가 변경되지 않는 한 재렌더링을 방지
useMemo: 계산된 값을 메모이제이션하여, 의존성이 변경될 때만 재계산한다.
useCallback: 함수를 메모이제이션하며, 의존성이 변경될 때만 새로운 함수를 생성한다.
이러한 메모이제이션 기법들은 리액트 애플리케이션의 성능을 개선하고 불필요한 렌더링을 줄이는데 큰 도움이 된다.
자 실습을 들어가보자
React.memo 실습
이렇게 코드를 짰을 때 콘솔을 확인해보면
App 컴포넌트, Box1,Box2,Box3 모두 카운트가 변경될 때마다 리렌더링이 일어나는것을 확인할 수 있었다.
방지하기 위해 Box1에만
방법 export하는 부분에 react.Memo()를 사용해보았다.
export default React.memo(Box1);
이후 콘솔을 확인해보면
첫 마운트 시점에만 박스1이 렌더링되고
카운트 값이 변경되더라도 box1은 리렌더링이 일어나지 않는것을 확인할 수 있었다.
여기까지 React.memo에 대한 내용이였고
이제는 useMemo를 알아보도록 하자
useCallback 실습
위에 작성한대로 useCallback은 함수 자체를 기억한다.
먼저 App.jsx에 초기화 함수를 선언하여
Box1.jsx에 해당 함수를 내려준다.
Box1.jsx에 React.memo를 사용하여 리렌더링을 막아준다.
그리고 내려받은 초기화 함수를
실행하면 box1의 값이 바뀌지 않았지만,
초기화 함수가 자식 컴포넌트 안으로 들어가서 동작하고 있기때문에
콘솔에 찍어보면 Box1이 렌더링되는것을 확인할 수 있었다.
해당 함수를 memoization함으로써 참조되는 주소가 안바뀌도록 하여 리렌더링을 막을 수 있다.
방법 정리
- 초기화함수를 useCallback으로 감싼다.
함수의 참조가 변경되지 않도록 - 의존성 배열을 넣어준다.
-[] 빈배열: 최초 렌더링 시점에만
-변수 추가: 특정 변수가 변경될 때마다 함수 실행
ex) [count]
마지막 useMemo에 대해 알아보자
useMemo 실습
이건 value를 캐싱한다
아주 무거운 작업을 캐싱 처리하는 것
실습을 해보자
이렇게 작성을 했을 때
count도 느리게 동작하고 새로고침을 해도 느리게 동작하는걸 확인해볼 수 있다.
이럴 때 useMemo를 사용한다.
사용 예시
이렇게 useMemo를 사용했을 때
첫 마운트 시점에는 오래 걸리지만,
이후 count가 빠르게 동작하는것을 확인할 수 있다.
이렇게 memoization에 대해 알아봤는데
잘 사용한다면 코드의 효율성을 높일 수 있을 것 같다
하지만 캐싱처리한 값을 별도로 확보해놔야하기 때문에 남발하면 안된다는 것을 알게되었다.
정리!
memoization에는 3가지가 있다
👉 React.memo는 컴포넌트를 캐싱
👉 useCallback은 함수를 캐싱
👉 useMemo는 값을 캐싱!
