함수 컴포넌트는 그냥 함수이다. jsx를 반환할 뿐.
함수 컴포넌트가 렌더링 된다는 것은 누군가(부모 컴포넌트)가 그 함수를 호출하여 실행되는 것이다.
함수가 실행될 때 마다 내부에 선언되어 있던 표현식(변수 등)들도 매번 다시 계산된다.
컴포넌트는 자신의 state가 변경되거나, 부모에게서 받은 props가 변경되었을 때 아마 다시 렌더링 된다.
useMemo()
- React에서 제공하는 Hook 함수
useMemo()는 특정 결과값을 재사용 할 때 사용- Memoization된 '값'을 반환
- useMemo에서 Memo는 Memoization을 뜻함
- memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
- memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있음
import
import React, { useMemo } from 'react';기본 문법
useMemo는 첫 번째 인자로 콜백 함수를, 두 번째 인자로 의존성 배열을 받는다.
두 번째 인자인 배열의 요소 값이 업데이트될 때만 콜백 함수를 다시 호출해서 memoization 된 값을 업데이트 해줘서 다시 memoization을 해준다.
만약에 빈 배열([])을 넘겨주면 맨 처음 컴포넌트가 마운트 되었을 때만 값을 계산하고 이후에는 항상 memoization된 값을 꺼내 와서 사용한다.
const memoizedValue = useMemo(() => { return **콜백함수** },[ **의존성배열** ]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);값을 재활용하기 위해 따로 메모리를 소비해서 저장을 해놓기 때문에 불필요한 값을 모두 Memoization 해버리면 성능이 안 좋아질 수 있으니 꼭 필요할 때만 사용하도록 한다.
useCallback()
- React에서 제공하는 Hook 함수
useCallback()은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용- Memoization된 '함수'을 반환
- 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다. 함수를 필요할때만 새로 만들고 재사용하여 성능을 최적화 한다.
import
import React, { useCallback } from 'react';기본 문법
useMemo는 첫 번째 인자로 콜백 함수를, 두 번째 인자로 의존성 배열을 받는다.
두 번째 인자인 배열의 요소 값이 업데이트될 때만 콜백 함수를 다시 호출해서 memoization 된 값을 업데이트 해줘서 다시 memoization을 해준다.
만약에 빈 배열([])을 넘겨주면 맨 처음 컴포넌트가 마운트 되었을 때만 값을 계산하고 이후에는 항상 memoization된 값을 꺼내 와서 사용한다.
const memoizedCallback = useCallback(
() => { **콜백함수** }, [ **의존성배열** ],
);
const memoizedCallback = useCallback(
() => { doSomething(a, b); }, [a, b],
);값을 재활용하기 위해 따로 메모리를 소비해서 저장을 해놓기 때문에 불필요한 값을 모두 Memoization 해버리면 성능이 안 좋아질 수 있으니 꼭 필요할 때만 사용하도록 한다.
React.memo
자식 컴포넌트에서 랜더링 최적화를 위한 별도의 코드(React.memo)를 추가하지 않으면, 부모에게서 받은 props가 변경되지 않았더라도 다시 리렌더링 된다.
useMemo()와useCallback()는 컴포넌트 내에서 값과 함수를 memoization 하고
React.memo() 컴포넌트 자체를 memoization 한다.
import
import React from 'react';기본 문법
React.memo() 함수로 컴포넌트를 감싸준다.
React 컴포넌트 함수를 React.memo() 함수로 감싸주면 해당 컴포넌트 함수는 props 값이 변경되지 않는 한 다시 호출되지 않는다.
const MyComponent = React.memo(function MyComponent(props) {
/* props를 사용하여 렌더링 */
});References
