8. Hooks(2)

useMemo

• 컴포넌트 내부에서 발생하는 연산 최소화
• 실습 코드는 insert외에 input 내용 수정되어도 getAverage함수가 호출됨
• useMemo 사용하면 특정 값이 바뀌었을 때만 연산을 실행, 원하는 값이 바뀌지 않았다면 이전 연산 결과를 다시 사용

Memoization

• memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다.
• memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다.

함수형 컴포넌트에 memoization 적용

아래 컴포넌트는 prop으로 넘어온 x와 y 값을 compute 함수에 인자로 넘겨서 z 값을 구한 후, 그 결과값을 div 엘리먼트로 감싸 출력해줍니다.

function MyComponent({ x, y }) {
  const z = compute(x, y);
  return <div>{z}</div>;
}

• 랜더링이 일어날 때 마다, compute함수의 인자로 넘어오는 x와 y값이 항상 바뀌는 게 아니라면 굳이 compute함수를 계속 호출할 필요가 있을까요?
• 위와 같이 불편한 사용자 경험은 위에서 간단히 설명드린 memoization 기법을 적용하면 개선할 수 있습니다.
• 랜더링이 발생했을 때, 이전 랜더링과 현재 랜더링 간에 x와 y값이 동일한 경우, 다시 함수를 호출을 하여 z값을 구하는 대신, 기존에 메모리의 어딘가에 저장해두었던 z값을 그대로 사용하는 것입니다.
• useMemo함수는 2개의 인자를 받는데, 첫번째는 결과값을 생성해주는 팩토리 함수이고, 두번째는 기존 결과값 재활용 여부의 기준이되는 입력값 배열입니다.

function MyComponent({ x, y }) {
  const z = useMemo(() => compute(x, y), [x, y]);
  return <div>{z}</div>;
}

useCallback

• 만들어 놨던 함수 재사용
• 렌더링 성능 최적화
• 그냥 함수 선언하면 렌더링 할 때마다 함수 다시 렌더링
• useCallback 사용하면 처음 렌더링 했을 때 만들어 놓은 함수 리렌더링 시 다시 안만들고 재사용
• 두 번째 인자로 업데이트 된 상태 적용하면, 그때만 리렌더링할 때 함수 다시 생성

const memoizedCallback = useCallback(function, deps);

const add = () => x + y;

• 예시로 위와 같은 함수가 있다고 할 때 useCallback을 사용하면 아래와 같이 적용할 수 있습니다.

const add = useCallback(() => x + y, [x, y]);

• 리액트 컴포넌트 안에 함수가 선언되어있을 때 이 함수는 해당 컴포넌트가 렌더링 될 때마다 새로운 함수가 생성되는데,
• useCallback을 사용하면 해당 컴포넌트가 렌더링 되더라도 그 함수가 의존하는 값(deps)들이 바뀌지 않는 한 기존 함수를 재사용할 수 있습니다.

useMemo와 useCallback의 차이점 ? ?

• useMemo : 특정 상태 업데이트 될 때만 연산 호출되게 최적화
• useCallback : 특정 상태 업데이트 될 때 렌더링될 것 선택해서 렌더링 성능 최적화

useRef

• useRef Hook은 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해 줍니다.
• useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킵니다.

다른 Hooks

• https://nikgraf.github.io/react-hooks/
• https://github.com/rehooks/awesome-react-hooks