[React]useReducer

useState처럼 상태관리, 상태 업데이트 hook이다.

변경할 값이 많을때 상태 업데이트 즉 상태 관리할 데이터가 많아질때 사용하면 디버깅이 편하며 

구조화된 방식으로 상태를 관리하고 싶을때 사용할 수 있다. 

 

선언형태 :

const [state, dispatch] = useReducer(reducer, initialState); 

 

state : 상태이름 (컴포넌트에서 사용할 상태) -> 빵 담는 접시 

dispatch : state를 변경 시 필요한 정보를 전달하는 '함수' -> 주문서

reducer: dispatch를 확인해서 state 변경해주는 함수-> 주방(공장)

initialState: state에 전달할 초기 값-> 빵 및 재료등 개수 설정 

 

reducer()와 action에 대해서

reducer()는 2가지 인자를 받는다 

• state : 위에서 선언한 state값 이 들어간다. (초기 값은 당연히 initialState에서 설정한 값)
• action : 업데이트를 위한 정보를 가지고 있는 '객체' 즉 위에서 선언한 dispatch라고 생각 (주문서)

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

dispach에서 case가 plus일 경우 무조건  +1 더하는것이고 

case Minus면 -1 

 

 

action객체(dispatch)

action객체 즉 dispatch는 위에 비유로 설명하자면

'빵 주문자가 주방에 전달할  '주문서'이다.

 

이곳에는 reducer()에 적어놨던 type을(주문 명령어) 적는다.

또한 reducer에서 필요할 데이터, 데이터 값(빵 재료들)도 같이 전달할 수 있다.

 

작성 시 무조건 따라야 하는 규칙은 아니지만 

'type 속 액션(값)은 대문자와 '_'로 구성하면 '

// 1을 더하는 액션(주문 명령)
{
  type: 'PLUS'
}
// 1을 빼는 액션(주문 명령)
{
  type: 'MINUS'
}
// input 값을(빵 속 재료 등) 변경하는 액션(주문 명령)
{
  type: 'CHANGE_INGREDIENT',
  ingredient : 'corn',
  price : 3000
}
// 새로운 객체(빵)를 생성하는 액션 (주문 명령)
{
  type: 'CREATE_BREAD',
  bread: {
    name: 'corn_bread',
    price: 4500
  },
  ingredient: {
    name: 'corn',
    value: '300g'
  }
}

 

 

dispatch는 state를 변경할 수 있는 명령어와 정보들을 세팅하

 

 

 

context랑 많이 쓰인다