useMemo

성능 최적화를 위해 특정 값이 변경될 때만 메모이제이션된 값을 재계산하도록 하여 불필요한 계산 방지
계산 비용이 높은 작업이나 렌더링 중에 자주 호출되는 작업에 유용

const memoizedValue=useMemo(()=>computeExpensiveValue(a,b), [a,b])

computeExpensiveValue(a,b) : 계산을 수행할 함수
[a,b] : 의존성 배열 ➡️ a나 b가 변경될 때만 함수 수행

• useMemo로 전달된 함수는 렌더링이 일어나는 동안 실행됨 ➡️ 렌더링이 일어나는 동안 실행해서는 안될 작업을 useMemo() 함수에 넣으면 안됨

• 의존성 배열을 넣지 않을 경우, 렌더링이 일어날 때마다 매번 함수를 실행

Average 컴포넌트에 저장된 숫자들의 평균을 구해서 출력하는 기능을 추가

기존 Average 코드

평균 계산하는 함수

const getAverage = (numbers) => {
  //빈 배열인 경우 0을 반환
  if (numbers.length === 0) return 0;

  //평균 계산 => 총합을 계산해서 배열의 길이로 나눔
  const total = numbers.reduce((prev, curr) => prev + curr);
  return total / numbers.length;
};

addList() 함수 수정

숫자를 등록할 때 문자열로 등록이 되기 때문에 합을 계산하기 위해서는 숫자로 변환해줘야 함

 const addList = () => {
    const newList = list.concat(Number(number)); 
   //Number()로 감싸줘서 숫자로 바꿔줌
     ...

  };

<p>평균값: {getAverage(list)}</p>
콘솔창을 확인해 보면 숫자를 입력하는 도중에도 불필요하게 평균값을 계산 ➡️ 불필요한 리소스 사용 및 렌더링 지연 문제가 발생함

useMemo훅을 이용해서 리스트에 숫자가 등록된 경우에만 평균값을 계산하도록 수정

const avg = useMemo(() => getAverage(list), [list]); 
//list가 변경될 때만 함수 호출

<p>평균값:{avg}</p>

값을 입력할 때(렌더링할 때)는 평균값을 계산하지 않도록

커스텀 Hook 만들기

useReducer를 이용해서 여러 상태 변수를 관리하던 것을 사용자 정의 훅으로 대체

useInputs 사용자 정의 훅 함수를 생성

상태변수와 상태변수의 값을 변경하는 핸들러 함수를 반환

const Info = () => {
    const [state,handlerChange]=useInputs({name:'',nickname:''});
    const {name,nickname}=state;