useReducer

Redux를 공부하기 전에 useReducer를 알아보자!

useReducer란 useState 보다 더 다양한 컴포넌트 상황에서 더 다양한 상태를 다루고 싶을 때 사용하는 hook이다.

Reducer는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션을 파라미터로 전달받아 새로운 상태를 반환하는 함수로 새로운 상태를 만들 때 반드시 불변성을 지켜야 한다.

import React, { useReducer } from 'react';

// 1 초기값 
const initState  = 0

// 2 액션함수 
const reducer = (state , action) => {
    switch(action.type){
        case 'INCREMENT': 
            return state + 1
        case 'DECREMENT':
            return state - 1
        case 'RESET' :
            return 0
        default : 
            return state         
    }
}

const Test = () => {
    // 3 연결 초기화 
    const [count , dispatch] = useReducer(reducer, initState) 
    return (
        <div>
            <h2>카운트값 : {count} </h2>
            
            <button onClick={()=>dispatch({type:'INCREMENT'})}>증가</button>
            <button onClick={()=>dispatch({type:'DECREMENT'})}>감소</button>
            <button onClick={()=>dispatch({type:'RESET'})}>초기값</button>
        </div>
    );
};

export default Test;

useReducer의 첫 번째 파라미터는 reducer 함수, 두 번째 파라미터에는 reducer의 기본값을 넣어준다.

count는 현재 가리키고 있는 상태 dispatch는 액션을 발생시키는 함수이다. 함수 안 파라미터로 액션 값을 넣어 주면 reducer 함수가 호출되는 구조다.

useReducer의 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것이다.

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

//1. 초기값
    const initalState = {
        count1 : 0 ,
        count2 : 0
    }

//2. 액션함수
    const reducer = (state , action) => {
        switch( action.type ){
            case 'IN1' :
                return {
                    ...state,
                    count1 : state.count1 + action.value 
                }
            case 'IN2' :
                return {
                    ...state, 
                    count2: state.count2 + action.value
                }
            default :
                return state        
        }
    }

const Test = () => {
    //3. 연결
    const [count , dispatch] = useReducer( reducer , initalState )
    return (
        <div>
            <h2>{count.count1}</h2>
            <button onClick={()=>dispatch({type:'IN1',value:2})}>2씩증가</button>
            <button onClick={()=>dispatch({type:'IN1',value:3})}>3씩증가</button>

            <h2>{count.count2}</h2>
            <button onClick={()=>dispatch({type:'IN2',value:5})}>5씩증가</button>
            <button onClick={()=>dispatch({type:'IN2',value:10})}>10씩증가</button>
        </div>
    );
};

export default Test;

action의 value값을 지정하여 동일한 action.type이여도 다른 내용을 실행 시킬 수 가 있다.

컴포넌트에서 관리하는 State 값이 많아지고 구조가 복잡해진다면 useReducer를 사용하는 것이 좋다.