[REACT] useReducer로 상태 업데이트 컴포넌트 외부에서 사용하기

상태 업데이트를 useState로 컴포넌트 내부에서 하는 방법도 있고 .

useReducer를 사용해서 컴포넌트 바깥에서 사용할 수 있다

 

 

reducer : 상태를 업데이트 하는 함수

dispatch: 액션을 발생시킨다.

 

 

사용법

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

reducer함수를 만들어주고 action의 type을 받아와서

case(액션) 마다 다음값이 무엇이 될지 return으로 설정해준다.

여기서는 액션이 INCREMENT이면 지금 있는 값에서 +1을 해주고

DECREMENT일때는 지금 있는 값에서 -1을 해주겠다는 뜻이다.

 

 

사용은 이렇게 하는데

number가 바꾸고 싶은 값이다 (state)

dispatch는 액션을 발생시키는 함수이고

useReducer함수의 첫번째 파라미터에는 아까 만들어두었던 reducer함수,

두번째 파라미터에는 state의 initialState이다.

 

 

이렇게 사용을 한다.

dispatch로 액션을 발생시켜주는 것이다.