React_useReducer_글자

import { useReducer, useState } from "react";       //1. useReducer와 useState 등록

export default function App() {

 

  const reducer = (current_state, action) => {      //current_state: 현재 배열 상태

   

    switch (action.type) {                          //action: { type: "타입명", item: 추가되는 값 }

     

      case "INCREMENT":                             //type명이 INCREMEMT인 경우

        return [...current_state, action.item];     //기존 배열에 신규 값 추가

      case "DECREMENT":                             //type명이 DECREMENT인 경우

                                                    //기존 배열에서 신규값과 같지 않은 값만 저장

      return [...current_state.filter((v, i) => v !== action.item)];  

      default:

        return current_state;

    }                                               ////////////////////////////////

  };

  const [items, dispatch] = useReducer(reducer, []); //2. useReducer와 useState 등록

  const [item, setItem] = useState("");              //////////////////////////////

 

  const onIncrease = () => {                         //3. 함수 등록

    dispatch({ type: "INCREMENT", item: item });     //action값의 type을 INCREMENT, item을 입력값

    console.log(items);                              //직전 배열값(배치)

  };

  const onDecrease = () => {

    dispatch({ type: "DECREMENT", item: item });     //action값의 type을 DECREMENT, item을 입력값

    console.log(items);                              //직전 배열값(배치)

  };                                                

  function handleChange(event) {                    

    setItem(event.target.value);                     //현재 이벤트가 발생하는 곳의 value

  }                                                  //////////////////////////////////

  return (

    <>

      <div>

        <input type="text" value={item} onChange={handleChange}></input>

        <button onClick={onIncrease}>+</button>

        <button onClick={onDecrease}>-</button>

        <hr></hr>

        <>

          {items.map((item, idx) => (

            <div key={idx}>{item}</div>

          ))}

        </>

      </div>

    </>

  );

}