Index

1. useReducer?
2. 간단한 코드 및 설명
3. 실행화면

---

useReducer?

useState와 비슷하게, state를 생성하고 관리해주는 도구
❓그럼 useState와 비교해서 언제 쓰는데 ?

• 더 복잡한 state를 생성할 때,

⭐️ 구성요소

• Reducer : state를 직접적으로 관리하는 본체
• dispatch : reducer에 요구를 하는 행위
• action : 요구 내용
  위 세가지로 구성

---

간단한 코드 및 설명

통장에 입금을 하는 간단한 서비스를 useReducer를 이용하여 구현하려 한다.

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

dispatch는 reducer를 수행시키는 함수이며,
useReducer()의 인자로는 첫번째로 reducer 함수형변수를, 두번째로 money state의 초깃값을 받는다.

const reducer =(state,action)=>{
	return state + action.payload;
};

dispatch()가 호출되면 해당 reducer 함수가 실행된다. 여기서 state는 money state를 가리키며, action은 dispatch() 의 인자로 받아온 객체이다.

<button onClikc={()=>{
	dispatch({type:'deposit', payload:number});
}}>입금</button>

버튼을 누르면 dispatch()호출을 하게 된다. 인자로는 type과 payload(number 변수값)를 넣어준다.

---

실행화면

---

해당 포스트는 별코딩님의 유튜브 강의를 기반으로 작성하였습니다.
https://youtu.be/tdORpiegLg0