React - Hook 24.05.23

hook이란 최적화하기 위해 사용함

useReducer

useState 보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 hook.
reducer 현재상태(초기값), 그리고 데이터 수정방법을 위해 필요한 정보를 담은 액션(action)값을 전달받아 새로운 상태를 반환하는 함수이다. reducer 함수에서 새로운 상태를 만들때는 반드시 불변성을 지켜줘야 한다.

function reducer(state, action){
   return{...}// 불변성을 지키면서 업데이트한 새로운 상태를 반환한다.
}
{
   type:’INCREMENT’,
   // 다른 값들이 필요하다면 추가로 들어감
}

• 순서
  

useMemo

컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.(해당 변수의 연산이 업데이트될때만 리렌더링)
parseInt: 텍스트를 숫자로 변경해주는 메서드
예) "1"-> 1

• reduce 메서드
  Array.prototype.reduce()

const array1 = [1, 2, 3, 4];
const sum = array1.reduce(
  (prev, cur) => prev + cur,
  //.reduce((이전값,현재값)=>연산)
  100	//옵션(있으면 무조건 더하고 시작, 없으면 배열의 값만 처리)
);
console.log(sum);

• useMemo를 사용한 결과
  
  등록을 누를 때만 getAverage 호출하게 되었다

useCallback (함수 최적화, 함수 재사용)

useMemo와 비슷하다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하는데 useCallback을 사용하면 만들어 놓은 함수를 재사용할 수 있다.

useRef

dom에 직접 접근하여 조작할때 사용

import React, { useCallback, useMemo, useRef, 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;
};