[리액트를 다루는 기술] Hooks_2 (useMemo, useCallback,useRef)

8.4 useMemo

• useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

import React, { useMemo } from "react";
import { useState } from "react";

const getAverage = (numbers) => {
  console.log("평균값 계산중 ..");
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");

  const onChange = (e) => {
    setNumber(e.target.value);
  };

  const onInsert = (e) => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
  };

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값</b> {avg}
      </div>
    </div>
  );
};

export default Average;

//아래와 같이 설정하면 list 배열이 바뀔 때만 getAverage 함수가 호출된다.
const avg = useMemo(() => getAverage(list), [list]);
<b>평균값</b> {avg}

8.5 useCallback

• useCallback은 useMemo와 상당히 비슷한 함수이다.
• 주로 렌더링 성능을 최적화 할 때 사용하며, 이 Hook을 사용하면 만들어 놨던 함수를 재사용할 수 있다.

import React, { useMemo } from "react";
import { useCallback } from "react";
import { useState } from "react";

const getAverage = (numbers) => {
  console.log("평균값 계산중 ..");
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  }, []);

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

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값</b> {avg}
      </div>
    </div>
  );
};

export default Average;

• onChange는 기존의 값을 조회하지 않고 설정만 하기 때문에 비어있는 배열을 두번재 파라미터로 넣어 컴포넌트가 렌더링될 때 만들었던 함수를 재사용
• onInsert는 기존의 number와 list를 조회해서 nextList를 생성하기 때문에 배열 안에 number와 list를 꼭 넣어주어야 한다.

8.6 useRef

• useRef Hook은 함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.

8.7 커스텀 Hooks

• 여러 컴포넌트에서 비슷한 기능을 공유할 경우, 커스텀 Hook으로 작성하여 로직을 재사용할 수 있다.

import { useReducer } from "react";

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value,
  };
}

export default function useInputs(initialForm) {
  const [state, dispatch] = useReducer(reducer, initialForm);
  const onChange = (e) => {
    dispatch(e.target);
  };
  return [state, onChange];
}