useReducer()란?

| useReducer 이해하기

상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정해주었습니다.

하지만 이 방법 말고도 더 다른 유용한 방법이 존재하는데 바로 useReducer 를 이용하여 상태를 관리하는것입니다.

이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있습니다.

상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수 있고, 다른 파일에 작성 후 불러와서 사용할 수 있습니다.

reducer 는 현재 상태와 액션객체를 파라미터로 받아아서 새로운 상태를 반환해주는 함수입니다.

 

 

function reducer(state,action){
 //새로운 상태를 만드는 로직
 return nextState;
}

 

 

reducer에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 됩니다.

여기서 action 은 업데이트를 위한 정보를 가지고 있습니다.

주로 type 값을 지는 객체 형태로 사용합니다.

• type 객체를 지닌 형태란 ?

{
 type: "ADD"
,value : "test"
,{
  todo : {
       id : 1
      ,text : "hi"
    }
  }
}

이런식으로 사용자가 특정 타입과 값들을 정의할 수 있습니다.

| useReducer 사용

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

첫 번째 인자 : reducer 함수

두 번째 인자 : 초기값

state 는 앞으로 컴포넌트에서 사용 할 수 있는 상태를 가르킵니다.

dispatch 는 액션을 발생시키는 함수입니다. ( dispatch({type:"ADD" } ) ) 이런식으로 사용합니다.

import React, { useReducer } from 'react';
​
​
function Counter() {
   const [state, dispatch] = useReducer(reducer, 0);
​
   const onIncreate = () => {
       dispatch({ type: "ADD " });
  }
​
   return (
       <div>
           <h1>{state}</h1>
           <button onClick = {onIncreate}> 버튼 </button>
       </div>
  )
}



//reducer는
//현재상태인 state 와 이후 상태들을 가르키는 action값을 가집니다.
function reducer(state,action) {
   console.log(state, action);
}
​
export default Counter;

​

 

이런식으로 버튼을 누르면 type:"ADD" 인 값이 dispatch 를 통하여 action값으로 들어오게 됩니다.