[React] - 0518 TIL: useMemo, React.Memo, useCallback, useReducer

useMemo와 useCallback

• useMemo는 특정한 값을 반환함
• useCallback은 콜백 함수(메모이제이션된)를 다시 반환함

UseCall back

• 메모이제이션된 콜백을 반환

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

컴포넌트 구조

• 상태변화 처리 함수(onCreate, onEdit, onRemove)는 data state를 참조해야하기 때문에 App.jsx에서 생성해서 씀! ⇒ App.jsx가 무거워짐 ㅠ

useReducer

• 컴포넌트에서 상태변화 로직을 분리하자
• 보통 상태변화 함수는 해당 컴포넌트 안에 작성 ⇒ 컴포넌트가 무거워짐
• but useReducer를 사용하면 상태변화를 한 번에 해주는 reducer 함수를 컴포넌트 밖으로 뺄 수 있음!
• reducer 함수는 항상 새로운 state를 리턴해줘야함
• reducer 함수의 리턴 값이 새로운 state 값이다