Reducer

useReducer hook이란?

• useState를 대체할 수 있는 함수입니다.
• React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state입니다.
• 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있습니다.
• 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작입니다.

 

1.useReducer 함수

import React, { useReducer } from "react";
const [state, dispatch] = useReducer(reducer, initialState, init);

 

1. state

컴포넌트에서 사용할 상태

 

2. dispatch 함수

첫번째 인자인 reducer 함수를 실행

컴포넌트 내에서 state의 업데이트를 일으키기 위한 함수

 

3. reducer 함수

컴포넌트 외부에서 state를 업데이트하는 함수

현재 state, action 객체를 인자로 받아, 기존의 state를 대체하여 새로운 state를 반환하는 함수

 

 

4. initialState

초기 state

 

5. init

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

 

 

 

2. dispatch 함수

• reducer 함수를 실행 시킨다.
• action 객체를 인자로 받으며 action 객체는 어떤 행동인지를 나타내는 type 속성과 해당 행동과 관련된 데이터를 담고 있다.
• action을 이용하여 컴포넌트 내에서 state의 업데이트를 일으킨다.