useReducer
const [<상태 객체>, <dispatch 함수>] = useReducer(<reducer 함수>, <초기 상태>, <초기 함수>)-
여기서 state 는 앞으로 컴포넌트에서 사용 할 수 있는 상태를 가르키게 되고, dispatch 는 액션을 발생시키는 함수라고 이해하면된다.
-
reducer는 현재 상태(state)와 행동(action)객체를 인자로 받아 새로운 상태 객체를 반환하는 함수이다.
dispatch?
컴포넌트 내에서 상태 변경을 일으키키 위해 사용되는 인자로 reducer함수에 넘길 행동 객체를 받는다.
즉! 컴포넌트에서 dispatch함수에 action을 던지면, reducer함수가 행동에 따라 상태를 변경해준다.
정리
React에서 컴포넌트의 상태 관리를 위해 많이 사용하는 hooks setState()이다.
setState의 사용이 많아지면서 좀 더 복잡한 상태 관리가 필요한 컴포넌트에서는 setReducer()의 훅 함수를 사용함으로서 상태를 관리할 수 있다.
(= useState의 대체 함수)
useCallback
-
메모이제이션을 반환한다. / 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될때까지 저장해놓고 재사용할 수 있게 해준다.
- 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 반복수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술
-
콜백의 의존성이 변경됐을때에만 변경된다. 이것은 즉 불필요한 렌더링을 방지하기 위해 자식 컴포넌트에 콜백을 전달할때 유용하다.
-
useMemo와 비슷하다.
useMemo는 특정 결과값을 재사용 할때 사용하는 반면에,useCallback은 특정 함수를 새로 만들지 않고 재사용 하고 싶을때 사용한다.
예시
컴포넌트 함수 안에 함수가 선언이 돼있다면, 이 함수는 해당 컴포넌트가 랜더링 될 때 마다 새로운 함수가 생성 =>
하지만 useCallback()을 사용하면, 해당 컴포넌트가 랜더링되더라도 그 함수가 의존하는 값이 바뀌지 않는 한 기존 함수를 계속해서 반환
즉! x또는 y값이 바뀌면 새로운 함수가 생성되어 add 변수에 할당되고, xdhk y값이 동일하다면 다음 랜더링이 될 때 이 함수를 재사용한다.
