useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른값으로 업데이트 하고 싶을때 사용한다.

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

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

액션 값은 주로 객체의 형태로 되어 있다.

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

구현해보기

기본 문법

• state : 현재 가리키고 있는 상태

• dispatch : 액션을 발생시키는 함수

• 첫번째 파라미터 : 리듀서함수

• 두번째 파라미터 : 해당 리듀서의 기본값

적용시키기

dispatch(action) 과 같은 형태로, 함수 안에 파라미터로 액션 값을 넣어 주면 리듀서 함수가 호출되는 구조이다.

useRecuer를 사용했을때 가장 큰 장점은 컴포넌트 업데이트 로직을 바깥으로 뺄수 있다는 것이다.

예제

여러개의 input창 관리 하기

usrReducer에서의 액션은 그 어떤 값도 사용이 가능하다. 이런식으로 input을 관리하면 인풋의 개수가 많아져도 코드를 짧고 깔끔하게 유지할 수 있다.