리액트(React) - useReducer

useState 코드

import React,{useState} from 'react'
import styled from "styled-components";

const InputCenter = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
`

const App = () => {
  const [count, setCount] = useState(0)

  const down = () =>{
    setCount(count - 1);
  }

  const reset = () =>{
    setCount(0);
  }

  const up = () => {
    setCount(count + 1);
  }

  return (
    <InputCenter>
      <input type="button" value="-" onClick={down}/>
      <input type="button" value="0" onClick={reset}/>
      <input type="button" value="+" onClick={up}/>
      <div>{count}</div>
    </InputCenter>
  )
}

export default App

현재 상황을 은행에 비유해보겠습니다. 은행은 고객과 장부가 핵심입니다. 이 세상에서 가장 간단한 은행은 고객이 장부를 직접 기록하는 거예요. 그러면 얼마나 단순해요. 고객과 장부만 있으면 되는 거죠. 비유적으로 보자면 state가 장부 같은 거예요. 그리고 고객은 이벤트가 발생했을 때 작업하는 함수들이고요.  -> 1억 명의 고객이 있으면 말이 안된다. ㅠ

 

이제 고객은 직접 장부를 기록하지 않습니다. 고객은 그냥 주문을 합니다. '나는 돈을 입금했어', '나는 돈을 출금했어'와 같이 단순한 명령을 내리는 거예요.그러면 창구 직원이 그 주문을 받습니다. 그리고 회계 직원에게 넘겨줍니다. 회계 담당자는 들어온 주문과 기존의 장부 내용을 이용해서 새로운 장부의 상태를 만들어내는 전문가입니다. 이 저문가가 장부에 새로운 값을 만들어내느 겁니다. 바로 이런 역할을 하는 것이 useReducer입니다.

 

useReducer는 비유하자면 은행을 만드는 코드예요. 이 은행에 두 개의 파라피터가 필요한데 첫 번쨰 파라미터인 counterReducer는 장부를 기록하는 회계 직원입니다. 그리고 구체적으로는 함수입니다. 그리고 두 번째 파라피터로는 이 장부의 초깃값을 설정합니다. 그러면 count 값은 0으로 출발할 것입니다. 장부를 변경할 때는 countDispatch를 사용하는데, 이 countDispatch가 창구 직원이라고 생각하면 되겠습니다.

 

const [count, countDispatch] = useReducer(countReducer, 0);

countDispatch -> 창구 직원

useReducer -> 은행을 만드는 코드

countReducer -> 장부를 기록하는 회계 직원

0 -> 장부의 초깃값

 

즉, useReducer는 회계 담당자와 장부의 초깃값, 장부, 그리고 창구 직원을 만드는 은행의 설립자라고 생각하면 될 것 같습니다.

 

  function countReducer(oldCount, action){
    if(action === 'UP'){
      return oldCount + 1
    } else if(action === 'DOWN'){
      return oldCount - 1
    } else if(action === 'RESET'){
      return 0;
    }
  }

  function down(){
    countReducer('DONW')
  }

  function up(){
    countReducer('UP')
  }

  function reset(){
    countReducer('RESET')
  }

 

useState와 useReducer의 가장 큰 차이점은 리듀서라는 함수를 이용한다는 것이고, 그 함수를 이ㅛㅇ하면 스테이트를 처리하는 작업을 고객이 직접하지 않고, 전문적인 회계 담당자에게 집중되는 것이다.

 

import React,{useReducer} from 'react'

import React,{useReducer} from 'react'
import styled from "styled-components";

const InputCenter = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
`

const App = () => {
  const [count, countDispatch] = useReducer(countReducer, 0);

  function countReducer(oldCount, action){
    if(action === 'UP'){
      return oldCount + 1
    } else if(action === 'DOWN'){
      return oldCount - 1
    } else if(action === 'RESET'){
      return 0;
    }
  }

  function down(){
    countDispatch('DOWN')
  }

  function up(){
    countDispatch('UP')
  }

  function reset(){
    countDispatch('RESET')
  }


  return (
    <InputCenter>
      <input type="button" value="-" onClick={down}/>
      <input type="button" value="0" onClick={reset}/>
      <input type="button" value="+" onClick={up}/>
      <div>{count}</div>
    </InputCenter>
  )
}

export default App

응용

import React,{useReducer, useState} from 'react'
import styled from "styled-components";

const InputCenter = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
`

const App = () => {
  const [count, countDispatch] = useReducer(countReducer, 0);
  const [number, setNumber] = useState(1)

  function countReducer(oldCount, action){
    const number = parseInt(action.number, 10);
    if(action.type === 'UP'){
        return oldCount + number;
    } else if(action.type === 'DOWN'){
        return oldCount - number;
    } else if(action.type === 'RESET'){
        return 0;
    }
}


  function down(){
    countDispatch({type: 'DOWN', number:number})
  }

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

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

  function changeNumber(event){
    setNumber(event.target.value)
  }


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

export default App