useReducer

useState와 같이 상태를 관리해주는 react hook

useReducer의 효과

useReducer를 사용하면 상태 업데이트 로직을 기존 컴포넌트로부터 분리시킬 수 있다. 컴포넌트 바깥에 작성할 수 도 있고 다른 파일에 작성한 후 불러올 수 도 있다.

useReducer 사용법

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

• useReducer는 두개의 요소를 가진 배열을 반환한다.
• state : 컴포넌트에서 사용할 수 있는 상태
• dispatch: state를 업데이트 하고 리렌더링을 촉발하는 함수
• reducer: state 업데이트 방식을 지정하는 순수 함수
• initialState: state의 초기 상태
• init: state 초기 값을 지정할 수 있는 초기화 함수

dispatch(value)

• value안에는 숫자,문자,객체등 다양하게 들어올 수 있다.
• value의 값은 reducer의 action으로 전달된다.

reducer(state,action)

• state: 현재 state
• action : dispatch 함수로부터 받을 액션

useReducer 활용 예제

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


function numberReducer(state,action){
  if(action.type==='UP'){
  	return state+1;
  }
  else if(action.type==='DOWN'){
  	return state-1;
  }
}

function Counter() {
 const [number, numberDispatch] =useReducer(numberReducer,0);
 //const [number,setNumber] =useState(0);
  
 function up() {
    //setNumber(prevNumber => prevNumber + 1);
   	numberDispatch({type:"UP"});
  };

  function down() {
    //setNumber(prevNumber => prevNumber - 1);
    numberDispatch({type:"DOWN"});
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={up}>+1</button>
      <button onClick={down}>-1</button>
    </div>
  );
}

export default Counter;

• numberDispatch의 인자는 numberReducer의 action으로 값을 보낸다.
• numberReducer 두번째 인자인 0은 state의 초기 상태이다.
• numberReducer에서 반환된 값이 새로운 state가 된다.
• numberReducer는 Counter 컴포넌트로부터 분리되어 바깥에서 작성할 수 있다.