[Hooks]useReducer

 

상태관리를 위한 훅이다. useState와 유사한 동작을 하지만 좀 더 복잡한 상태 관리를할 때 유용하다.

useReducer는 redux와 같은 상태관리 라이브러리에서 사용되는 reducer개념을 기반으로 한다.

 

1.useState와의 차이점

1️⃣복잡한 상태의 관리

useState는 간단하고 직관적인 상태 관리를 제공한다. 단일 값,객체를 사용하여 상태를 관리하는 반면,

useReducer는 보다 복잡한 상태 관리를 위해 사용될때 유용하다. 

 

2️⃣업데이트 방식

useState는 setState함수를 제공하여 상태를 업데이트 한다.

useReducer는 액션 객체를 통해 상태를 업데이트한다. 액션이란것은 어떤 type의 업데이트를 수행할건지

설명해주며, 추가적인 데이터를 전달할 수 있다.

 

3️⃣로직의 집합

useState는 로직을 컴포넌트 내부에 구현해야 하므로 로직이 집중화 되지 않는다. 

useReducer는 리듀서 함수를 통해 로직을 집중화할 수 있다.

 

4️⃣컴포넌트의 단순화

useState는 각각의 상태를 독립적으로 관리하는데 적합한 반면,

useReducer는 여러 상태 값을 그룹화하여 관리하는데 적합하다.이를 통해 컴포넌트 구조가 단순해 질 수 있다.

 

2.기본 구조

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

• state : 현재 상태를 나타낸다.
• dispatch : 액션을 발생시키는 함수로, reducer에게 액션 객체를 전달하여 상태를 업데이트한다.
• reducer : 현재 상태와 액션을 받아 변경된 상태를 반환하는 함수
• initialState : 상태의 초기 값

 

3.리듀서 만들기

const reducer= (state,action)=>{
  switch(action.type){
    //type별 동작 수행
  }
}

reducer는 현재 상태state와 dispatch를 통해 전달받은 action 객체를 받아서 동작을 수행한다.

이것을 통해서 상태 업데이트 로직을 분리하고 액션을 통해 상태를 업데이트 할 수 있다.

 

 

 

4.간단한 예제 만들어보기

가장 간단한 카운터 예제를 통해서 동작을 확인

1.reducer선언하기
const [count,dispatch] = useReducer(reducer,0);

2.reducer만들기
const reducer = (state,action) =>{
  switch (action.type){
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    case 'reset':
      return initialState;
    default:
      return state;
  }
}

3.컴포넌트에서 dispatch하기 
const Counter = () => {
  const [count,dispatch] = useReducer(reducer,0);
  const handleIncrement = () => {
    dispatch({ type: 'increment' });
  };
  ...
return (
  <div>
    <p>Count: {count}</p>
    <button onClick={handleIncrement}>Increment</button>
  </div>
  );
}