인프런 커뮤니티 질문&답변
작성한 질문수
useCallback, useMemo
작성
·
169
0
두개의 차이점이
함수를 return , 값을 return 하는 거 같은데
혹시 사용시점이나 명확한 차이점이 더 존재할까요 ?
또
import React, { useMemo, useState } from 'react';
export default function App(){
const [name, setName] = useState();
const [age, setAge] = useState(0);
const [v1, setV1] = useState(0);
const value = useMemo(() => runExpensiveJob(name, age), [name, age]);
return (
<div>
<p>{`name is ${name}`}</p>
<p>{`v1 is ${v1}`}</p>
<Edit onSave = {value} setName = {setName} setAge = {setAge}></Edit>
<button onClick={() => {
setV1(Math.random())
}}>
변경
</button>
</div>
);
}
const Edit = React.memo(function ({ onSave, setName, setAge }) {
console.log("UserEdit render");
return null;
});
function runExpensiveJob(v1,v2) {}
이렇게 useCallback이아닌 useMemo를 사용할 경우 리렌더링이 되지 않더라구요
명확한 차이점이 뚜렷하지 않아 헷갈립니다
단순히 useCallback은 함수를 리턴할 경우 사용하고
useMemo는 값을 리턴할 때 사용하는건가요 ?
답변 1
1
이재승
지식공유자
안녕하세요
반환하는 값이 함수인지 아닌지에 따라 구분할 수도 있지만, 아래 1번 코드처럼 함수를 반환하는 경우에도 useMemo 를 사용할 수 있습니다 (makeSomeFunc 가 함수를 반환한다고 가정)
함수를 반환하더라도 연산 자체가 부담스러운 경우에는 useCallback 보다 useMemo 가 나을 수 있습니다.
const f1 = useMemo(() => makeSomeFunc(name, age), [name, age]); // 1
const f2 = useCallback(makeSomeFunc(name, age), [name, age]); // 2