React(29) 리액트 훅 useReducer 란

useReducer 란?

useReducer 함수는 간단히 말해 리액트에서 상태변화를 업데이트 해주는 함수이다.

const [state, dispatch] = useReducer(reducer, 초기값, 초기 함수)

 

useReducer 함수를 사용하려면 

+ state 와  + dispatch() 함수 + reducer() 함수가 필요하다.

 

reducer() 함수를 사용하려면 

+ state 와 action 이 필요하다.

 

** dispatch({ 는 action 오브젝트 내용 }) 을 넣는다.  그러면 reducer 가 동작하여 action 을 받아 상태(state)를 변경해준다.
** reducer(는 현재 state와, action) 을 인자로 받아 => 새로운 상태(state) 를 반환 하는 함수이다.
** action 은  { type 속성과,  data } 를 담고있다.

 

** 예제를 통해 자세히 알아보자 

counter.js

1. useReducer 을 임포트하자. 

2. useReducer 선언을해주자. 

3. count 의 증가 버튼 / 감소 버튼 / 랜덤값이 나오는 무작위 버튼 / 초기화 버튼 을 만든다.

4. 버튼을 클릭하면 dispatch({ 함수의 action 오브젝트 내용에 따라 }) => reducer 함수가 동작하여 상태(state)를 변경해준다.

 

reducer.js

1. 일단 초기값을 담당할 변수 initialState 선언을 해주자 

2. reducer(는 현재 state와, action) 을 인자로 받는다. => action 에 따른 새로운 상태(state)를 반환할 준비가 되었다.

3. Switch 문을 사용하여 액션타입에 따라 다른 결과를 리턴하도록 만들자

 

 

 

 

** ref : www.daleseo.com/react-hooks-use-reducer/