React useReducer()

YEZI🎐·2022년 8월 4일
0

React

목록 보기
23/29

useReducer()

const [state, dispatch] = useReducer(reducer/* 함수 */, initialArg/* 초기값 */, init);
// (state, action) => newState의 형태로 reducer를 받음
  • React에서 제공하는 Hook 함수 중 하나
  • 전역 상태 관리보다는 상태 관리에 더 가까움
  • 하지만 전역 상태 관리인 Context APIRedux와 함께 많이 쓰임
  • useState()의 대체 함수
  • dispatch()는 객체를 받음
  • useState()는 state를 변경하는 set 함수를 반환하고,
    useReducer()는 state를 변경하게 하는 dispatch를 반환
  • 현재의 state를 조작하여 반환을 해야할 때나 다음 state가 이전 state에 의존적인 경우 주로 사용

사용 법

  1. import useReducer

    import React, { useReducer } from "react";
  2. 새로운 useReducer 변수를 선언

    export default function Counter() {
    	/* 이 부분 */
    	const [state, dispatch] = useReducer(reducer, initialState);
    	return (
    		<></>
    	);
    }
  3. reducer 함수와 initialState 설정

    const initialState = {count: 0};
    
    function reducer(state, action) {
    	switch (action.type) {
    		case 'increment':
    			return {count: state.count + 1};
    		case 'decrement':
    			return {count: state.count - 1};
    		default:
    			break;
    	}
    }
  4. dispatch 값 전달 트리거 작성

    const initialState = {count: 0};
    
    function reducer(state, action) {
    	switch (action.type) {
    		case 'increment':
    			return {count: state.count + 1};
    		case 'decrement':
    			return {count: state.count - 1};
    		default:
    			break;
    	}
    }
    
    export default function Counter() {
    	const [state, dispatch] = useReducer(reducer, initialState);
    	return (
    		<>
    			Count: {state.count}
    			/* 이 부분 */
    			<button onClick={() => dispatch({type: 'decrement'})}>-</button>
    			<button onClick={() => dispatch({type: 'increment'})}>+</button>
    		</>
    	);
    }
profile
까먹지마도토도토잠보🐘

0개의 댓글