❗️해당 게시물은 별코딩 useReducer강의를 수강하고 작성한 게시물입니다.

useReducer

현재 컴포넌트가 아닌 다른 곳에 state를 저장하고 싶을 때 유용하다.

useReducer를 위한 함수

• reducer 라는 함수를 만들고 state와 action 인자를 받는다.
• reducer 라는 함수는 예약어는 아니어서 다른 이름으로 만들 수 있다. 단, reducer로 지정하는게 좋다.
• action에는 객체가 전달되는데 그 안에 type 이라는 프로퍼티를 주로 설정해서 사용한다.
• type 프로퍼티를 통해 switch 문으로 분기한다.
• state는 useReducer를 통해 저장된 변수이다.
• 주로 initialState라는 객체에 초기 정보를 담고 useReducer에게 전달한다.

코드 형태

useReducer 형태

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

• 첫번째 인자로 reducer함수를 받는다.
• 두번째 인자로 초기값(initialState)를 받는다.

❗️자세한 코드는 아래 Veloperty blog 참고
Veloperty useReducer 사용방법

reducer 형태

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

• 첫번째 인자로는 현재 state
• 두번째 인자로는 action
• type에 따라서 조건을 만들어줘야 한다.

useReducer 에선 일반적으로 default: 부분에 throw new Error('Unhandled Action')과 같이 에러를 발생시키도록 처리하는게 일반적이다.

예금 출금 로직 구현하기

import React, {useState, useReducer} from 'react';

//useReducer도 useState와 똑같이 state가 바뀔 때 마다
//컴포넌트를 렌더링 해준다.

const ACTION_TYPES = {
    deposit : 'deposit',
    withdraw : 'withdraw',
}

const reducer = (state, action) => {
    console.log('reducer가 일을 합니다!',state, action);
    switch(action.type){
        case ACTION_TYPES.deposit:
            return state + action.payload;
        case ACTION_TYPES.withdraw:
            return state - action.payload;
        default :
            return state;
    }
}
//reducer호출 되는 시점에 state는 money라는 state가 들어가게 된다.

function App(){
    const [number, setNumber] = useState(0);
    const [money, dispatch] = useReducer(reducer, 0);
    //첫번째 인자 - Reducer 두번째 인자 - 초기값

    return(
        <div>
            <h2>useReducer 은행에 오신것을 환영합니다.</h2>
            <p>잔고 : {money}원</p>
            <input
                type = "number"
                value = {number}
                onChange = {(e)=> setNumber(parseInt(e.target.value))}
                step="1000"
            />
            <button onClick={()=>{
                dispatch({type : ACTION_TYPES.deposit, payload : number});
                //action은 object 형태로 해준다.
            }}>예금</button>
            <button onClick={()=>{
                dispatch({ type:ACTION_TYPES.withdraw, payload : number});
            }}>출금</button>
        </div>
    )
}

export default App;