(10).이정환_react.js강의_useReducer정의

useReducer 정의 :

useState와 비슷한 기능이지만, 컴포넌트 내에서만 구현해야되는 useState의 한계점을 보완하여, useReducer를 컴포넌트에서 dispatch로 알린뒤 , 구체적인 기능, 구현 내용을 컴포넌트에 외부에 기재하여 , 코드 가독성을 높여준는 Hook중 하나이다.

실습 내용 ; useReducer로 counter 구현

순서1_ 컴포넌트 내에서, state 변수, dispatch , useReducer() 객체 생성

const [state, dispatch] = useReducer(reducer , 0);

// state : 사용할 State 변수

//dispatch : useReducer 와 state 변수를 사용하겠다고 알리는 통보 , 전달자

//useReducer 객체 : 매개인자1 : reducer 함수 , state 변수 초기값

순서2_ 컴포넌트 밖에 세부 state변수의 상세 변화 구현 함수 reducer 작성

function reducer(state, action){

switch(axtion.type 조건 내용)
{
    case "ONEPLUS" : return state + action.data;
    case "뒤져라" : return 그에 대힌 state 결과 반환

    //ex_ case "onePlus" return stare + action.data ;
}

}

//매개인자 1 : state

//매개인자 2 : action

action 객체

- 속성1 : type : 상태변화 정보가 담긴 title 이름의 문자열 ex_ "INCRESE"

- 속성2 : data : type을 얼마만큼의 연산을 할지의 피연산자값

구현부 : switch(action.type ~ 조건){case "시발련아" : return state 시발 action.data};

순서3_ 각 핸들러에는 dispatch를 통해 적절한 type과 action.data를 객체형태로 전달 , 호출

onClickPlusBtn = ()=>{

    dispatch({
        type : "ONEPLUS",
        data : 1,
    });
}

최종 코드 :

import { useReducer } from "react";

//순서2_ 상태변화 함수 작성 => useReducer 객체에 인자로 대입
//상태 변환기 역할
//매개인자 1 : state 변수 , action 객체
function reducer(state, action) {
  //순서4 : action의 type에 따른 state 상태변화 구현
  switch (action.type) {
    case "INCRE":
      return state + action.data;
    case "DECRE":
      return state - action.data;
    case "POW":
      return state * action.data;
    default:
      return state;
  }
}

function Exam() {
  //순서1_ State 변수 사용할거라고 통보 느낌
  const [state, dispatch] = useReducer(reducer, 0);
  //useReducer 매개인자 1: 변환기 함수 , 2. 초기값값

  //순서3 : 핸들러 내에 어떻게 상태변화 할건지 상세내용 적기
  const onClickPlus = () => {
    //dispatch : 통신병 역할
    //dispatch 매개인자 : action 객체 => type , data
    dispatch({
      type: "INCRE",
      data: 1,
    });
  };
  const onClickMinus = () => {
    //dispatch : 통신병 역할
    //dispatch 매개인자 : action 객체 => type , data
    dispatch({
      type: "DECRE",
      data: 1,
    });
  };
  const onClickPow = () => {
    //dispatch : 통신병 역할
    //dispatch 매개인자 : action 객체 => type , data
    dispatch({
      type: "POW",
      data: state,
    });
  };
  return (
    <div className="Exam">
      <h1>{state}</h1>
      <button onClick={onClickPlus}>+</button>
      <button onClick={onClickMinus}>-</button>
      <button onClick={onClickPow}>Pow</button>
    </div>
  );
}

export default Exam;

TodoList 프로젝트의 item 추가 , 수정 , 삭제를 useReducer로 코드 바꾸기

//순서2_ reducer에 구현부 작성
function reducer(items , action){

    switch(action.type){

        //spread 문법으로 , action.data : 추가할 객체 data , ...items : 기존 mockDataes
        case "CREATE" : return [action.data , ...items];

        //checkBox 업데이트 : action.data : 인자로 받아온 targetID
        case "UPDATE" :
            return items.map((item)=>{
                if(item.id===action.data)
                {
                    return {...item , isDone : !item.isDone}
                }
                return item;
            });
         //action.data : 추가할 객체 data
        case "DELETE" :
        return items.filter((item)=>{
            if(item.id!==action.data) return item;    
        })

    }
}


function App(){

    //순서1_ useReducer 등록

    const [items, dispatch] = useReducer(reducer, mockdata);


    //순서3_ 각 핸들러에 적절한 dispatch 호출

    const onCreateItem = (content)=>{

        dispatch({
            type : "CREATE",
            data : {
                id : ++idRef.current,
                isDone : false,
                content : content,
                date  : new Date(),
            }
        });
    }

        const onUpdateIsDone= (targetID)=>{

        dispatch({
            type : "UPDATE",
            data : targetID,
        });
    }


        const onDeleteItem = (targetID)=>{

     dispatch({
            type : "DELETE",
            data : targetID,
        });
    }




    return...
}