잘못 된 내용에 대한 지적은 언제든 환영입니다.
useMemo
useMemo
함수의 구조useMemo(function, deps)
function
: deps 값 변화에 따라 수행시키고자 하는 작업deps
: 재연산 여부의 기준이 되는 값이 들어가는 deps 배열useMemo
사용해 보기예시 : endCount.current
값이 0일 때는 item이의 값이, 1일 때는 item2의 값이 true
로 바뀌는 예시
const [item1, setItem1] = useState(false),
[item2, setItem2] = useState(false);
// 렌더링에 따라 item1/item2의 업데이트 순서를 알려주는 변수
const endCount = useRef(0);
console.log("-----------렌더링-----------");
useMemo(
() =>
console.log("(endCount = " + endCount.current + ") item1 = " + item1),
[item1]
);
useMemo(
() =>
console.log("(endCount = " + endCount.current + ") item2 = " + item2),
[item2]
);
// 상태 변경 순서 : item1 ➡ item2
switch (endCount.current) {
case 0:
setItem1(true);
endCount.current += 1;
break;
case 1:
setItem2(true);
endCount.current += 1;
break;
default:
return null;
}
콘솔 출력 결과 : 첫 렌더링 시 두 콘솔 모두 실행된 뒤, endCount.current
값에 따라 각 함수가 실행되고 있음을 알 수 있다.
-----------렌더링-----------
(endCount = 0) item1 = false
(endCount = 0) item2 = false
-----------렌더링-----------
(endCount = 1) item1 = true
-----------렌더링-----------
(endCount = 2) item2 = true
References
"17. useMemo 를 사용하여 연산한 값 재사용하기" .velopert
"React Hooks : useMemo() 함수 컴포넌트 성능 최적화" .xiubindev*