useCallback, useMemo

Question

두개의 차이점이 함수를 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 > { `v1 is ${ v1 } ` } < Edit onSave = { value } setName = { setName } setAge = { setAge } > < button onClick = { () => { setV1 ( Math . random ()) } } > 변경 ); } const Edit = React . memo ( function ({ onSave , setName , setAge }) { console . log ( "UserEdit render" ); return null ; }); function runExpensiveJob ( v1 , v2 ) {} 이렇게 useCallback이아닌 useMemo를 사용할 경우 리렌더링이 되지 않더라구요 명확한 차이점이 뚜렷하지 않아 헷갈립니다 단순히 useCallback은 함수를 리턴할 경우 사용하고 useMemo는 값을 리턴할 때 사용하는건가요 ?

이재승 · Answer

안녕하세요
반환하는 값이 함수인지 아닌지에 따라 구분할 수도 있지만, 아래 1번 코드처럼 함수를 반환하는 경우에도 useMemo 를 사용할 수 있습니다 (makeSomeFunc 가 함수를 반환한다고 가정)
함수를 반환하더라도 연산 자체가 부담스러운 경우에는 useCallback 보다 useMemo 가 나을 수 있습니다.