React - useReducer

Big Jay·2022년 9월 7일

React

목록 보기

8/10

useState의 대체 함수로 다수의 하윗값을 포함하는 복잡한 정적 로직을 만들거나 state가 이전 state에 의존적인 경우에 사용한다. 또한 useReducer는 자세한 업데이트를 트리거하는 컴포넌트의 성능을 최적화할 수 있게 하는데, 이것은 콜백 대신 dispatch를 전달 할 수 있기 때문이다.
- React - useReducer

reducer

reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수다.

function reducer(state, action){
  // 새로운 상태를 만드는 로직
  // const nextState = ...
	return nextState;
}

state

state는 애플리케이션의 변경되는 데이터의 상태이다. reducer는 변경된 state를 반환한다.

action

업데이트를 위한 정보를 가지고 있다.
주로 type 값을 지닌 객체 형태로 사용하지만 꼭 그럴 필요는 없다.

{
	type:"ADD_TODO",
    payload:{
    	id: 1,
        text: "오늘 할 일",
    }
}

useReducer 사용하기

useReducer의 사용법은 아래와 같다.

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

dispatch

dispatch가 작동하면 reducer의 action이 발생한다.

const addTodo = ()=>{
	dispatch({
      type:"ADD_TODO",
      payload: {
          id: 1,
          text: "오늘 할 일",
  	  }
    })
}

예제

useReducer를 사용하여 간단한 todo 리스트 만들기

reducer 생성하기

// todo type
interface Itodo {
  text?: string;
  id: number;
}
// action type
interface Iaction {
  type: string;
  payload: Itodo;
}

// state의 초기값 생성
const initialState: Itodo[] = [];

// reducer 함수 생성
const reducer = (state: Itodo[], action: Iaction) => {
  // switch로 action의 type에 따라 변경 된state 리턴
  switch (action.type) {
    case "ADD_TODO":
      return [action.payload, ...state];
    case "DELETE_TODO":
      return state.filter((todo) => todo.id !== action.payload.id);
    default:
      return state;
  }
};

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

// todo 추가 handle 생성
 const addTodo = (event: React.MouseEvent<HTMLElement>) => {
   // 버튼 클릭시 새로고침 제거
    event.preventDefault();
   // dispatch함수로 reducer에 action 전달
    dispatch({ type: "ADD_TODO", payload: { text, id: Date.now() } });
    setText("");
  };

// todo 삭제 handle 생성
  const deleteTodo = (id: number) => {
    dispatch({
      type: "DELETE_TODO",
      payload: { id }
    });
  };