useReducer

오인섭·2021년 3월 3일
0

ReactJS

목록 보기
5/6

useReducer는 useState처럼 상태를 업데이트 하는 Hook으로, useState와 달리 App컴포넌트에서 분리시킬 수 있어 다른곳에서도 쉽게 재사용 가능하다.
컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useState보다 useReducer로 관리하는게 더 편해질 수 있다.

 
function reducer(state, action){
  switch(action.type){
    case '(type1)' : 
      return {
      	// type1일때 반환되는 값
      };
    case '(type2)' : 
      return {
      	// type2일때 반환되는 값
      };
    default :
      return state;
  }
}

const [state, dispatch] = useReducer(reducer, 0);
  • dispatch는 액션을 발생시키는 함수로 스위치문의 해당 case를 입력해주면 그에 맞는 상태결과값이 출력된다.
  • action은 dispatch의 type값을 의미한다.

0개의 댓글