생활코딩: useReducer

1. App.js 작성

import React, {createContext, useContext, useEffect, useReducer, useState} from "react";


function App(){

     // const [count, setCount] = useState(0);
     const [count, countDispatch] = useReducer(countReducer, 0); //countReducer: 회계직원, 0:초깃값
     const [number, setNumber] = useState(1)
   
  
  function countReducer(oldCount, action){ //old가 접두어인듯, action은 예약어
    if(action.type === 'UP'){
      return oldCount + action.number;
    
    // }else if(action === 'DOWN'){
    }else if(action.type === 'DOWN'){
      // return oldCount - 1;
      return oldCount - action.number;
    
    }else if(action.type === 'RESET'){
      return 0;
    }
  }


  function down(){
    // countDispatch('DOWN'); //countDispatch에 값(액션)이 전달되면,
    // countReducer 함수가 호출되면서 두 개의 값을 입력받는다. 하나는 현재 값, 하나는 action
    countDispatch({type:'DOWN', number:number});
  }

  function up(){
    countDispatch({type:'UP', number:number});
  }

  function reset(){
    countDispatch({type:'RESET', number:number});
  }

  function changeNumber(event){
    setNumber(Number(event.target.value));

  }
  

  return(
    <div>
      <input type="button" value="-" onClick={down}></input>
      <input type="button" value="0" onClick={reset}></input>
      <input type="button" value="+" onClick={up}></input>
      <input type="text" value={number} onChange={changeNumber}></input>
      <span>{count}</span>
    </div>
  )
}

export default App;


/**
  
 userReducer 사용 이유
 : 
 사용하는 쪽에서는 복잡한 로직을 처리하지 않아도 된다.
 복잡한 상태를 바꾸는 것은 전문화된 함수가 처리할 수 있게 된다.
 
이 예제처럼 이전의 값과 이후의 값이 서로 상당한 관계성을 가지는 경우 (이전값 +, - 등), 
리듀서를 사용하면 상태를 변경하는 과정을 리듀서 함수 안에 은닉할 수 있다.

 */