Memoization
비용이 많이 드는 함수 호출의 결과를 저장하고, 동일한 입력이 다시 발생했을 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높여주는 최적화 기법이다.
일반적으로 React의 컴포넌트 함수는 렌더링이 일어날 때마다 호출이 된다.
컴포넌트는 다음과 같은 상황에 (리)렌더링이 일어난다.
shouldComponentUpdate
에서 true가 반환될 때forceUpdate
가 실행될 때이때 만약 연산의 속도가 느린 컴포넌트라면 리렌더링이 될 때마다 연산을 다시 해줘 UI에서 지연이 발생하게 된다.
=> useMemo
사용
useMemo
는 두개의 인자를 받는다.
1. 결과값을 생성해주는 함수
2. 어떤 값이 변경되었을 때 다시 실행할지 정해줄 변수
성능이 좀 걸리는 부분에 useMemo를 사용하면 좋다.
React.memo(컴포넌트)
=> 이러면 부모 컴포넌트가 변경되어도 자식이 리렌더링 되지 않음.
useCallback
은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.(useMemo
는 특정 값을 메모이제이션, useCallback
은 특정 함수를 메모이제이션)
useCallback(함수,[]);
첫번째 인자로 인라인 콜백 전달
두번째 인자로 dependency 전달
메모이제이션 된 버전은 콜백의 의존성이 변경되었을 때만 변경
=> 불필요한 렌더링을 방지하기 위해 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용
useRef
는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환한다.
이때 반환된 객체는 컴포넌트의 전 생애 주기를 통해 유지된다.
useRef는 리렌더링 되지 않고, 컴포넌트의 속성만 조회 및 수정을 한다.
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
1.DOM에 직접 접근할 때 사용
2. 지역 변수로 사용할 때 사용
=> useState
과 차이점?
useState
는 값이 변경될 때 다시 렌더링을 한다.useRef
는 값이 변경되더라도 다시 렌더링을 하지 않는다.