React Hooks란?

useReducer에 대해 알아보기 전에, 우선 리액트 훅에 대해 알아보자.

리액트 훅은 리액트 클래스형 컴포넌트 바탕의 코드를 작성할 필요 없이,

함수형 컴포넌트에서 상태 값과 여러 리액트의 기능을

사용할 수 있게 만들어주는 라이브러리다!

useReducer란?

상태를 관리하는 useState를 대체할 수 있는 리액트 훅이다!

이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을

컴포넌트에서 분리시킬 수 있다.

상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고,

심지어 다른 파일에 작성 후 불러와서 사용할 수도 있다!

---

그렇다면 상태관리를 하는 hook이 두 개인데,

어느 경우에 useState를,

어느 경우에 useReducer를 써야할까? 🤔

---

useState를 권장하는 경우!

관리해야 할 State가 1개일 경우
관리하는 State가 단순한 숫자, 문자열 또는 Boolean 값일 경우


useReducer를 권장하는 경우!

관리해야 할 State가 1개 이상, 복수일 경우
현재는 단일 State 값만 관리하지만, 추후 유동적일 가능성이 있는 경우
스케일이 큰 프로젝트의 state의 구조가 복잡해질 경우

useReducer의 사용법은?

useReducer 함수의 형태

import React, { useReducer } from "react";

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

state
컴포넌트에서 사용할 상태

dispatch 함수
첫번째 인자인 reducer 함수를 실행시킨다.
컴포넌트 내에서 state의 업데이트를 일으키키 위해 사용하는 함수

reducer 함수
컴포넌트 외부에서 state를 업데이트 하는 함수
현재 state, action 객체를 인자로 받아,
기존의 state를 대체하여 새로운 state를 반환하는 함수

initialState
초기 state

init
초기 함수 (초기 state를 조금 지연해서 생성하기 위해 사용)

---

dispatch 함수

dispatch 함수는 reducer 함수를 실행시킨다.

dispatch 함수의 인자로써 업데이트를 위한 정보를 가진 action를 이용하여,

컴포넌트 내에서 state의 업데이트를 일으키기 위해서 사용된다.

ex)

dispatch({ type: ACTION_TYPE.FETCH_START });

---

reducer 함수

dispatch 함수에 의해 실행되며,

컴포넌트 외부에서 state를 업데이트 하는 로직을 담당 한다.

함수의 인자로는 state와 action을 받게 된다.

state와 action을 활용하여 새로운 state를 반환 한다.

ex)

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      throw new Error("unsupported action type: ", action.type);
  }
}

---

payload

payload는 우리가 리듀서로 전달해주는 모든 데이터가 payload이다.

ex)

dispatch({ type: ACTION_TYPE.FETCH_SUCCESS, payload: data })

이렇게 dispatch 안에 payload로 데이터를 담아서 보내면
reducer에서 payload를 받아 상태를 업데이트 하는 개념이다.

---

• 예시와 함께 익히기 -> https://react.vlpt.us/basic/20-useReducer.html