useReducer

✅ useReducer란?

상태를 관리할 때 사용하는 hook 함수로, useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.

상태 업데이트 로직을 컴포넌트 바깥에서 작성할 수도 있고, 심지어 다른 파일에 작성 후 불러 와서 사용할 수도 있다.

본격적으로 useReducer를 사용해보기 전에, 먼저 reducer와 dispatch가 무엇인지 알아야 한다.

💡 여러개의 하위값을 포함하는 복잡한 state를 사용해야 할 때 사용

👉 reducer란?

현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다.

function Reducer(oldCount, action) {}

• oldCount(=state) : 현재 상태를 받아오는 값
• action : 업데이트를 위한 정보를 가지고 있다. 주로 type 값을 지닌 객체 형태로 사용한다.

👉 dispatch란?

액션을 발생시키는 함수이다.

const [count, countDispatch] = useReducer(Reducer, 0)

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

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

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

✅ useReducer 사용하기

const [count, countDispatch] = useReducer(Reducer, 0)

useReducer 함수 첫번째 인자로는 reducer함수를 두번째 인자로는 초기값을 입력한다.

import logo from './logo.svg';
import './App.css';
import { useReducer} from 'react';

function App() {

  function Reducer(oldCount, action){
    if(action === "UP"){
      return oldCount+1;
    } else if (action === "RESET"){
      return 0;
    } else if(action === "DOWN"){
      return oldCount-1;
    }
  }
  const [count, countDispatch] = useReducer(Reducer, 0)

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

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

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

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

export default App;

✅ useReducer vs useState 중 뭐를 쓸까?

컴포넌트에서 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열, boolean이라면 useState를 사용한다.

하지만 컴포넌트에서 관리하는 값이 여러개가 되어 상태의 구조가 복잡해진다면 useReducer로 관리한다.