[react] React Hook 3 (useReducer)

📍 useReducer

• 리액트의 상태(state) 관리 훅 이다.
• useState 보다 복잡한 상태 로직을 관리할 때 사용함.
• -----------------------------------------------------------------------------------------
• 기본 개념 및 사용 방법
  • const [state, dispatch] = useReducer(reducer, initalState);
  • state : 현재 상태 값
  • dispatch : 상태를 변경하기 위해 action 을 전달하는 함수
  • reducer : 상태를 업데이트하는 로직을 담은 함수
  • initialState : 초기 상태 값 --> 객체 형태로 넣기!
• -----------------------------------------------------------------------------------------
• useReducer 의 핵심은 State 를 한 곳에 모아두고 체계적으로 관리하는 것!!
  • state : 창고 안에 저장된 현재 물품 상태
  • dispath : 창고 관리자에게 보내는 요청서
  • action : 요청서에 들어가는 구체적인 요구사항 (출고, 입고 등등)
    • action을 dispath 에 담아서 보낸다고 생각하면 됨.
  • reducer : 요청서를 바탕으로 실제 처리하는 작업 지침서 및 실제 state 를 변화시키고, 입/출고 등의 실제 작업이 발생 재고 수량의 변화 등을 발생시킴.
    • 가장 핵심적인 로직이 들어가는 부분.
• dispatch({type : "OUT", payload : inputValue})
  • 객체형태로 넣으면 됨.
• action.type , 
  action.payload 와 같이 action.~ 으로 꺼내면 됨.
• -----------------------------------------------------------------------------------------
• 같은 컴포넌트에서 useReducer 을 여러번 사용 가능함.
• 각각의 useReducer 하나 = 작은 상태 머신 1개 라고 생각하면 됨.
  • 컴포넌트
     ├─ reducer A (카운터)
     ├─ reducer B (유저)
     └─ reducer C (모달)
    
• ⭕️⭕️ 서로 다른 관심사(state) 를 분리할 때. --> 사용하면 좋음.!
• ❌❌ 상태들이 강하게 연결되어 있으면?? --> reducer가 서로 얽힘. 
  • --> 이런 경우는 하나의 reducer 로 합치는 게 좋음.
  • ex) order 과 payment 와 같이 서로 연관성이 높은 경우는 따로 해야 함.
• -----------------------------------------------------------------------------------------

 

📍 풀코드

import { useReducer, useState } from "react";
import { createRoot } from "react-dom/client";

function warehouseReducer(state, action) {
    /*
    switch(action.type) {
        case "IN" : return {...state, stock : state.stock + 1};
        case "OUT" : return {...state, stock : Math.max(0, state.stock - 1)};
        default : return state;
    }
    */
   switch(action.type) {
        case "IN" : return {...state, stock : state.stock + action.payload};
        case "OUT" : return {...state, stock : Math.max(0, state.stock - action.payload)};
        default : return state;
    }
}

function userReducer(user, action){
    switch(action.setName){
        case "Y" : {
            console.log( action.name ); 
            return { ...user, name : action.name } 
        };
        default : return user;
    }
    

}

function WareHouse() {
    const [state, dispatch] = useReducer(warehouseReducer, { stock : 0, cnt : 1 });
    const [inputValue, setInputValue] = useState(1);
    const userInitalState = { name : "홍길동", age : 20 }; // userReducer 에 넣을 초기값 객체!
    const [user, dispatchUser] = useReducer(userReducer, userInitalState );

    const handleChange = (e) => {
        let targetId = e.target.id;
        let targetVal = e.target.value;

        switch(targetId){
            case "stock" : {
                const val = parseInt(targetVal, 10);
                // 1. useState 이용해보기.
                // setInputValue( isNaN(val) ? 0 : val );
                // 2. useReducer 이용해보기.
                warehouseReducer( {cnt : targetVal} );
                console.log(state.cnt);
                break;
            }
            case "name" : {
                dispatchUser( {setName: "Y" ,name : targetVal} ); 
                break;
            }
            default : { console.log(`err ---- ${targetId}`); }
        };
        
    } 

    return (
        <div>
            <h1>창고 재고 : {state.stock}</h1>
            <p>
                <input id="stock" type="number" value={inputValue} onChange={handleChange} placeholder="수량입력" />
            </p>
            <button onClick={ () => dispatch({type : "IN", payload : state.cnt}) }>입고</button>
            <button onClick={ () => dispatch({type : "OUT", payload : state.cnt}) }>출고</button>
        
            <p>
                <input id="name" type="text" value={user.name} onChange={handleChange} placeholder="수량입력" />
            </p>
        </div>
    );
}


createRoot(document.getElementById('react4')).render(<WareHouse />);

 

📍 ?

• ㅇㅇ 

 

 

 

 

📍 ?

• ㅇㅇ 

 

---

출처 : 

 

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.