[ React ] useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init?)

useReducer 는 useState의 심화 버전으로 볼 수 있다.

단순히 number 나 boolean과 같이 간단한 값을 관리하는 것은 useState로 충분하지만, state 하나가 가져야 할 값이 복잡하고 이를 수정하는 경우의 수가 많아진다면 state를 관리하는 것이 어려워진다.

또 여러 개의 state를 관리하는 것보다 때로는 성격이 비슷한 여러 개의 state를 묶어 useReducer로 관리하는 편이 더 효율적일 수도 있다.

Parameters

• reducer
• initialArg
• init (선택) : useState에 함수를 넘겨줄 때처럼 초깃값을 지연해서 생성시키고 싶을 때 사용하는 함수; 게으른 초기화가 일어나며 initialState를 인수로 init 함수가 실행된다.(게으른 초기화 함수는 넣어줌으로써 useState에 함수를 넣은 것과 같은 동일한 이점을 누릴 수 있고, 추가로 state에 대한 초기화가 필요할 때 reducer에서 이를 재사용할 수 있다.)

Returns

길이가 2인 배열을 반환한다.

• state : 현재 useReducer가 갖고 있는 값
• dispatch : state를 업데이트하는 함수; action을 넘겨준다.

dispatch function

• 상태를 업데이트 하고 리렌더링을 시킨다.
• 인수로 action 이 필요하다.

Parameters

• action : 타입 상관없지만, 대부분 type 속성을 기본으로 하고, 추가로 필요하면 정보를 담은 다른 속성도 넣는다.

Returns

• dispatch : return 값이 없다.
• state를 사용하는 로직과 이를 관리하는 비즈니스 로직을 분리할 수 있다.