[React] useReducer

서론

내가 리덕스로 이것 저것 하자마자 수업에서 이걸 다뤘다
정말 정말 까먹고 있었던 개념

useReducer란

useState와 마찬가지로 상태를 관리하는 리액트 내장 hook이다

기본 사용

import { useReducer } from 'react';

function reducer(state, action) {
  //...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialValue);
  // ...
}

• reducer
  • 상태를 업데이트하는 로직 삽입
  • action으로 이벤트를 구분해 type에 따라 다른 처리 로직을 작성함
  • 다음 state값을 반환함
  • 순수 함수여야 함!
• dispatch
  • state를 새로운 값으로 업데이트 할 때 사용 (reducer 호출, useState의 setState와 같은 역할)
  • useState의 setState와 마찬가지로 호출 시 리렌더링 유발
  • useState의 setState와 마찬가지로 업데이트 된 state는 다음 렌더링에 반영 됨
  • action을 인수로 받음
  • 반환 값 없음
• useReducer
  • 사용할 리듀서와 초기 값을 받아 사용자가 사용할 수 있는 상태 값과 dispatch를 반환

적용

• 이해를 위해 reducer를 이용해 카운터를 만들어봤다

코드

  function reducer(state, action) {
    switch (action.type) {
      case "count-up":
        return state + 1;
      case "count-down":
        return state - 1;
    }
  }

  const [state, dispatch] = useReducer(reducer, 8)


  return (
    <main className="min-h-screen flex justify-center items-center">
      <button onClick={()=>dispatch({type: 'count-down'})} className="p-4 text-lg">-</button>
      <span className="font-bold text-3xl">{state}</span>
      <button  onClick={()=>dispatch({type: 'count-up'})}  className="p-4 text-lg">+</button>
    </main>
  );

• inline으로 작성해서 잘 안 보일 수 있지만 button의 onClick에서 dispatch를 사용하고 있으며 다른 인수는 받지 않고 action이라는 이벤트 객체를 전달해 준다
• action 객체에 payload라는 프로퍼티도 전달할 수 있다

화면

useState와 비교

• 사실 여기까지 봤을 때 굳이 이걸 사용해야하는 이유를 모르겠음,,,
• useState에서 객체를 다룰 땐 setState 함수 호출 시 인수가 복잡해 진다

setState((prevState)=>{
	// 데이터 처리로직...
	return {
		...prevState,
        prop: newValue
    }
})

• useReducer를 사용하면 해당 reducer라는 함수로 로직을 분리할 수 있어 개발자 코드가 더욱 간결해 지고 유지보수 관리가 편해진다.
• 또한 여러 setState를 호출하는 함수를 하나의 reducer로 관리할 수 있어 편리하다

🟡 주의

• 간단한 로직일 경우에는 useState의 로직이 훨씬 직관적
• useReducer는 useState에 비해 작성해야 할 코드가 많이 있는 로직 (action, reducer 등)
• 상황에 따라 꼭 필요한 경우에 사용

Redux와 비교

• 이전에 내가 작성했던 리덕스에서 사용하는 reducer부터 구조가 굉장히 비슷하다
• action을 사용하는 것도 같은데 목적이 다르다

리덕스

• 리덕스는 전역에서 상태를 관리하여 props로 데이터를 전달 받아서 사용하는 불편함을 해소하고자 사용한다
• props drilling 이라는 문제점을 해결하기 위해 나온 라이브러리

useReducer

• props drilling을 위한 것이 아닌 상태 관리 로직을 분리하기 위해 나왔다
• 따라서 props drilling을 해결해 주지 않는다
• useReducers는

마무리

아는 만큼 활용할 수 있는 것 같다
이름과 형태만 보고 엇 이랬는데 수업 들어보니 용도가 달라서 신기했다~