React 복습 / 최적화 / useReducer

• State를 변경시키면 화면을 렌더링 할 수 있다. 하지만 렌더링시 모든 컴포넌트가 렌더링되면 비효율적이고 내부에 정의 돼 있는 function들도 초기화된다. 데이터를 보존해야하는 경우나 초기화가 필요없는 function에 대해서 무조건 초기화 시키는 것이 아니라 필요시에만 초기화되도록 관리를 해야할 필요가 있다.

  초기화
  필요시에만 초기화되도록 관리해서 컴포넌트를 조금 더 효율적으로 관리하는 것을 뜻한다.

useReducer

• 리액트에서 컴포넌트의 상태를 관리하기위해 가장 많이 쓰는 hook이 setState() 함수인데 여기서 더 복잡한 상태 관리가 필요한 컴포넌트에서는 setReducer() hook을 사용한다.

  기본 구문
  const [<상태 객체>, <dispatch 함수>] = useReducer(<reducer 함수>, <초기상태값>)

Test01) useState만 적용한 경우

버튼 클릭이 감지되면 각 함수를 호출하고 호출된 함수가 useState를 이용해 렌더링돼서 count 값이 업데이트된다.

Test02) useReducer 이용

• mydispatch가 호출되면 type과 data 객체를 reduce를 호출한다.
• myreducer에서는 state값 (count값) 과 action(mydipatch의 type 값과 data값) 을 받아서 function을 실행 한다.
• 결과적으로 count의 값을 + 혹은 - 한 값을 return 해서 count 값이 업데이트 된다.

useMemo

• 함수의 불필요한 재실행 방지
• 메모이제이션(Memoization) 기법을 이용해 연산의 결과값을 기억해 두었다가 필요할 때 사용함으로 불필요한 함수호출을 줄여주는 hook
• const value = useMemo(callback, [의존성배열]);
  => 의존성배열 의 값이 바뀌면 callback 함수를 실행하고 결과값 return

useCallback()

• 함수의 불필요한 재생성 방지
• 컴포넌트 리랜더링시 내부의 함수를 재생성하지 않도록 메모이제이션함.
• useCallback(callback, [의존성배열])
  => [의존성배열] 이 변경되면 callback 함수를 재생성 return 함.
• useCallback(callback, []) / 비어있는 배열을 전달하면 callback 함수는 마운트시에만 생성되고, 이후에는 재생성 되지않음

관련 노션

https://www.notion.so/useReducer-8c2498ba1e9f4ee58ae50ff126fc8c8d

git

https://github.com/winsam003/MyCode.git