useReducer

• useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용
• reducer : 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수
• 새로운 상태를 만들 때는 반드시 불변성을 지켜야 함
• 컴포넌트 업데이트 로직을 컴포넌트 바깥에서 할 수 있다는 장점

function reducer(state, action){
	return();
}

액션 값 형태

{
	type:'INCREMENT',
}
{
	type:'CHANGE_INPUT',
    key:'email',
    value:'a@gmail.com'
}
{
	type:'ADD_TODO',
    todo: {
    	id:1,
        text:'useReducer',
        done:false
    }
}

• 어떤 액션인지 알려주는 type 값
• 형태는 자유임.

useReducer의 형태

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

• dispatch 사용 시,

dispath({type:'INCREMENT'})

1. 카운터 구현

import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 };
    case "DECREMENT":
      return { value: state.value - 1 };
    default:
      return state;
  }
}
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
    <>
      <div>카운터 값 : {state.value}</div>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>증가</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>감소</button>
    </>
  );
};

export default Counter;

• useReducer의 첫번째 파라미터에는 reducer함수를 넣고, 두번째 파라미터에는 해당 리듀서의 기본값을 넣음
• useReducer : state, dispatch값을 받아옴
  1 .state : 현재 가리키고 있는 상태
  2 .dispatch : 액션을 발생시키는 함수

2. 여러 input 값 관리하기

import React, { useReducer } from "react";

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value
  };
}

const Info = () => {
  const [state, dispatch] = useReducer(reducer, {
    name: "",
    nickname: ""
  });

  const { name, nickname } = state;

  const onChange = (e) => {
    dispatch(e.target);
  };
  return (
    <>
      <div>
        <input value={name} name="name" onChange={onChange} />
        <input value={nickname} name="nickname" onChange={onChange} />
      </div>
      <div>{name}</div>
      <div>{nickname}</div>
    </>
  );
};

export default Info;

• action은 어떤 값도 다 받을 수 있음 : e.target값 자체를 action값으로 사용함.