[Hanaro] 28일차 / React (Hooks- useMemo, useReducer)

02 React Hooks

• useMemo
  • useMemo란
    • 여기서 Memo는 memoization을 뜻하고 이전에 계산한 값을 메모리에 저장하여 동일한 계산의 반복 수행을 제거하여 실행 속도를 올리는 기술이다.
    • 변수를 React Static 영역에 cache
    • 메모화된 변수는 이제 주소가 변하지 않는다.
  • 사용
    • import
      • import { useMemo } from ‘react’;
    • 기본 형태

    const 메모화된_변수 = useMemo(() => { 
       비용이_드는_코드;       
       return 메모화할_값;                
     }, [의존관계변수들]);      
    

• useReducer
  • useReducer란
    • reduce란 기존(현재) 값을 바탕으로 추가 액션을 하는 것
    • reducer란 기존 값 각각에 해당 액션을 해주는 함수, 이전 상태와 액션을 합쳐서 새로운 상태를 만드는 조작
    • reducer란 같은 상태를 변경하는 함수들을 한 곳에 모아 놓은 것
    • dispatcher(action)은 action을 전달하는 함수 (Strict Mode에서는 2회 call)
    • useReducer란 useState (컴포넌트 상태 관리에 쓰이는 hook)를 대체할 수 있는 함수이고 좀 더 복잡한 상태 관리가 필요할 때 사용한다.
    • useReducer의 장점은 setter를 직접적으로 노출하지 않으면서 상태 변경하는 함수(reducer)를 컴포넌트 외부에 둘 수 있다.
  • 사용
    • import
      • import { useReducer } from 'react';
    • 기본 형태
      • const [state, dispatcher] = useReducer(reducer, 초깃값);
  • useState와 useReducer의 차이
    • useState
      • 관리해야 할 state가 1개일 경우
      • state가 단순 숫자, 문자열, boolean 값일 경우
    • useReducer
      • 관리해야 할 state가 1개 이상일 경우
      • 현재 1개의 state만 관리하고 있어도 추후 늘어날 가능성이 있는 경우
      • state의 구조가 복잡할 경우