더북(TheBook)

8.3 useReducer

useReduceruseState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook입니다. 리듀서(reducer)라는 개념은 17장에서 리덕스를 배울 때 더 자세히 알아보겠습니다. 여기서 다루는 내용이 어렵다고 느껴진다면 17장을 보고 나서 이 내용을 다시 한 번 확인해 보세요.

리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수입니다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 합니다.

function reducer(state, action) {
return { ... }; // 불변성을 지키면서 업데이트한 새로운 상태를 반환합니다.
}

액션 값은 주로 다음과 같은 형태로 이루어져 있습니다.

{
  type: 'INCREMENT',
  // 다른 값들이 필요하다면 추가로 들어감
}

17장에서 다룰 리덕스에서 사용하는 액션 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액션 객체는 반드시 type을 지니고 있을 필요가 없습니다. 심지어 객체가 아니라 문자열이나 숫자여도 상관없습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.