[Redux]리덕스 -Today I'm Learned (4) useCallback, useMemo

useCallback, useMemo

둘다 사용방식은 동일합니다.

const onInsert = useCallback(() => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber(“);
  }, [number, list])

useEffect의 의존성 배열 마냥 [] 대괄호 안에 있는 것이 변화가 있을때 작동하게 만듭니다.

 

둘다 성능의 최적화에 사용되는 함수인데, 

useMemo 함수내부의 연산을 주로 최적화 하는데, 사용된다.

useCallback은 이벤트 함수를 필요할때만 만들게 만듭니다.

 

'useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 합니다.

숫자, 문자열, 객체처럼 일반 값을 재사용하려면 useMemo를 사용하고, 함수를 재사용하려면 useCallback을 사용하세요.'

useCallback(() => {
  console.log(‘hello world!‘);
}, [])


useMemo(() => {
  const fn = () => {
    console.log(‘hello world!‘);
  };
  return fn;
}, [])

// 동일한 내용의 코드.