[React] Hook 함수정리3(useReducer)

useReducer를 알기전에 상태를 업데이트 할때는 useState를 사용해서 새로운 상태를 설정해주었는데

상태를 관리하게 될 때 useState를 사용하는거 말고도 또 다른 방법 useReducer!!!!! 새로운 상태관리~~

 

useState는 설정하고 싶은 상태를 직접 설정하고 지정해서 상태를 업데이트했지만

userReducer은 액션 객체를 기반으로 상태를 업데이트함!!!!!

 

 

dispatch 호출하면 reducer 응답

action은 가지고있는 객체 전달~

reducer는 state 업데이트

Dispatch(Action) =====> Reducer(state, Action))

 

useReducer()

1) 상태초기화

2)  reducer함수 구현

3) 상태와 dispatch 생성 ====> useReducer(reducer함수, 상태초기화)

 

구문)

import React, { useReducer } from 'react';

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

▶return [state, dispatch f()] 배열을 리턴해줌

 

useState 와 useReducer 상태관리 비교하기

 

 

 

App.js

import Counter from './components/Counter';

function App() {
  return (
    <div className="App">
      <Counter/>
    </div>
  );
}

export default App;

 

Counter.js  (useState 사용)

import React, {useState} from 'react';

const Counter = () => {
    const [number, setNumber] = useState(0);
    const onIncress = () =>{
        setNumber(number + 1)
    }
    const ondecress = () =>{
        setNumber(number - 1)
    }
    return (
        <div>
            <h2>{number}</h2>
            <button onClick={onIncress}>+1</button>
            <button onClick={ondecress}>-1</button>
        </div>
    );
};

export default Counter;

 

Counter.js  (useReducer 사용)

import React, { useReducer } from 'react';
function reducer(state, action){
    //action에 따라 상태를 업데이트 조건문
    switch(action.type) {
        case 'increase' :
            return state +1;  //number 업데이트
        case "decrease" :
            return state -1;
        default: 
            return state;        
    }
}
const Counter2 = () => {
    const [number, dispatch] = useReducer(reducer,0);
    const onIncrease = () => {
        dispatch({  //자동으로 매개변수 하나만 받는다 
            type: "increase"
        })
    }
    const onDecrease = () => {
        dispatch({
            type: "decrease"
        })
    }
    return (
        <div>
            <h2>{number}</h2>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
};

export default Counter2;