[React] useReducer

📍 useReducer
useState()와 같은 상태 관리, 상태 업데이트 훅(Hook)이다.

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

• state : 상태 이름 (컴포넌트에서 사용할 상태)
• dispatch : 상태(state) 변경 시 필요한 정보를 전달하는 함수
• reducer : dispatch를 확인해서 state를 변경해 주는 함수
• initialState : state에 전달할 초기 값으로 객체, 배열 등 다양한 값으로 전달 가능

• 언제 사용할까?
  • 변경할 값이 많을 때(상태 업데이트) 즉, 상태 관리할 데이터가 많아질 때
  • 구조화된 방식으로 상태를 관리하고 싶을 때

그런데 서치를 좀 해보니 useReducer는 React만을 사용할 때 사용되는 경우는 적고, Redux를 이용한 상태관리를 진행할 때 많이 사용되는 것 같다.

(+) 그 이유가 리덕스가 추구하는 방향, 사용법이 비슷해서 그런 것 같다는 의견도 있었다.

---

useReducer 사용 방법

https://ccomccomhan.tistory.com/281 에서 이해하기 잘 설명해둬서 참고해서 작성해보도록 하겠다!

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

✔ state 👉 빵 재료 담는 접시
: 상태 이름 (컴포넌트에서 사용할 상태)

✔ dispatch 👉 주문서
: 상태(state)를 변경 시 필요한 정보를 전달하는 '함수'

✔ reducer 👉 제작
: dispatch를 확인해서 state를 변경해 주는 '함수'

✔ initialState 👉 빵 재료
: state에 전달할 초기 값

• 비유 설명

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

🙋 빵 제작 요청자
: "빵 재료를 처음에는 3개로 해야지~ (initialState)" ⇒ "다 골랐으니 접시에 넣어야겠다!(state)" 

👨‍🍳🍳 주방장
: "다들 주목! 우리 주방은 정해진 주문서(dispatch)대로만 제작(reducer)한다! 알겠나?"

🧑🧑🏻‍🍳 주방원들
: "넵!" 

그런데 dispatch, reducer는 내가 만득 적이 없는데 뭘까?

👨🏻‍🍳🍳 reducer( )와 action

• reducer( )는 2가지 인자를 받음.
  • state
    위에서 선언한 state값이 들어간다. (초기 값은 당연히 initialState에서 설정한 값)
  • action
    업데이트를 위한 정보를 가지고 있는 객체. 즉, 위에서 선언한 dispatch(주문서)

• 비유 예시

function reducer(state, action) {
	switch (action.type) {
    	case 'PLUS':
        	return state + 1;
        case 'MINUS': 
        	return state - 1;
        default: return state; 
   }
}

👨‍🍳🍳 주방장
: "우리 주방은 주문서(dispatch) 속 주문내역이 'PLUS'라면 어떠한 재료(state)가 오더라도 무조건 + 1해 알겠어!?"

🧑🧑🏻‍🍳 주방원들
: "넵!" 

👨‍🍳🍳 주방장
: "이것이 내가 적어놓은 제조 방식(reducer)이니 적어놓은 대로만 실행하란 말이야! 알겠어!?"

📍 action객체 (dispatch)
action객체 dispatch는 위 비유 예제로 설명하자면, '빵 주문자가 주방에 전달할 주문서'라고 할 수 있다.

• reducer( )에 적어놨던 type을(주문 명령어) 적는다.
• reducer에서 필요할 데이터, 데이터 값(빵 재료들)도 같이 전달할 수 있다.
• 필수 규칙은 아니나 암묵적 국룰로 'type 속 액션(값)은 대문자와 '_'로 구성한다.

// 1을 더하는 액션(주문 명령)
{
 type: 'PLUS'
}
// 1을 빼는 액션(주문 명령)
{
 type: 'MINUS'
}
// input 값을(빵 속 재료 등) 변경하는 액션(주문 명령)
{
 type: 'CHANGE_INGREDIENT',
 ingredient : 'corn',
 price : 3000
}
// 새로운 객체(빵)를 생성하는 액션 (주문 명령)
{
 type: 'CREATE_BREAD',
 bread: {
   name: 'corn_bread',
   price: 4500
 },
 ingredient: {
   name: 'corn',
   value: '300g'
 }
}

• 비유 예제
  dispatch는 state를 변경할 수 있는 명령어와 정보들을 세팅하는 곳으로 보통 아래처럼 2가지 형식으로 많이 사용한다.

// 1번째 방법
const onPlus = () => {
   dispatch({type : 'PLUS'})
}

<button onClick={onPlus}>Plus</button>

/// 2번째 방법
<button onClick={() => dispatch({ type: 'PLUS' })}>Plus</button>

🙋 빵 제작 요청자
: "주방장님! 여기 'PLUS' 1회 요청이요!" 

• 비유 예제

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'PLUS':
      return state + 1;
    case 'MINUS':
      return state - 1;
    default:
      return state;
  }
}

function Baking() {
  // 3을 value 저장
  // 위에 선언했던 값을 변경하는 reducer 함수를 넣어주기!
  // reducer속 로직들을 실행시킬 명령어가 담겨있는 dispatch 선언
  const [value, dispatch] = useReducer(reducer, 3);

  const onPlus = () => {
    dispatch({ type: 'PLUS' });
  };

  const onMinus = () => {
    dispatch({ type: 'MINUS' });
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onPlus}>+1</button>
      <button onClick={onMinus}>-1</button>
    </div>
  );
}

export default Baking;

✅ 흐름
: 초기 랜더링 ->  useReducer() 선언 -> '+1' 버튼 클릭

👨‍🍳🍳 주방장
:  "다들 주목! 우리 주방은 정해진 주문서(dispatch)대로만 제작(reducer)한다! 알겠나?"
🧑🧑🏻‍🍳 주방원들
: "넵!"

 
👨‍🍳🍳 주방장 
: "PLUS 요청이 오면 재료를 어떻게 하라고?"
🧑🧑🏻‍🍳 주방원들 
: "현재 재료 상태(number)에서 +1 합니다!"

🙋 빵 제작 요청자 
: "빵 재료를 처음에는 3개로 해야지~ (initialState)" ⇒ "다 골랐으니 접시에 넣어야겠다!(state)" ⇒ '+1' 버튼을 눌러서 "PLUS" 주문 요청을 통해서 밀가루를 4개로 만들어달라고 해야겠다! 

( [+1] 버튼 클릭)

👨‍🍳🍳 주방장 
: "다들 주목! 방금 dispatch를 통해서 action을 취해달라고 요청이 왔어 여기 손님은.. 어디 보자~ type은 'PLUS'네? 그리고 밀가루를 3개를 같이 보내주었네..? 에헤이 이전 손님은 옥수수여서 편했는데.. 아무튼 우리는 PLUS 요청이 오면 재료를 어떻게 하라고?'

🧑🧑🏻‍🍳 주방원들 
: "넘어온 재료를 (number) +1 합니다!"
👨‍🍳🍳 주방장 
: "뭐 해 당장 진행시켜!(reducer 속 case 실행)