<aside> 💡 웹 서비스의 성능을 개선하는 기술 ex) 코드, 폰트, 이미지 파일의 크기 줄이는 방법

</aside>

리액트 앱 연산 최적화

메모이제이션(Memoization)

특정 입력에 대한 결과를 계산해 메모리를 어딘가 저장했다가, 동일한 요청이 들어오면 저장한 결괏값을 응답

리액트의 최적화 기능

1) useMemo

연산의 결괏값을 기억했다가 필요할 때 사용하는 리액트 훅(불 필요한 함수 호출막기)

// useMemo의 용법
const value = useMemo(callback(콜백함수), deps(의존성 배열))

의존성 배열에 담긴 값이 바뀌면 콜백 함수를 다시 실행하고 결괏값을 반환

const value = useMemo(() => {
    return count * count
}, [count]);

의존성 배열 count의 값이 변할 때만 count * count를 계산해 value에 저장

2) React.memo

<aside> 💡 React.memo는 props 변화에만 영향을 준다. 즉, 함수 컴포넌트 안에서 구현한 state나 context가 변할 때는 재렌더링된다.

</aside>

컴포넌트가 props로 동일한 결과를 렌더링하면, React.memo를 호출하고 결과를 메모이징(Memoizaing) 하도록 래핑하여 경우에 따라 성능 향상을 할 수 있다.