React: useReducer에 대해서

 이전에 useState에 대해 작성한 적이 있다. useReducer도 useState처럼 동적으로 변경이 되는 데이터를 관리할 때 사용할 수 있는 상태 업데이트 훅이다. useReducer의 경우 복잡한 state 로직을 다룰 때 (state 객체 안에 또 다른 state가 있을 경우 등) 유용하게 사용된다. 공식 홈페이지에서는 가급적이면 useState를 사용을 권장하고 있다. 

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

• state: 현재 상태 값을 나타낸다. 
• dispatch: state를 다른 값으로 업데이트하고 재렌더링을 해주는 함수로, action을 인자로 받아 reducer에 전달한다.
  
  • action : 사용자에 의해 수행되는 활동으로, type 속성을 가지고 있다. type 속성을 통해 어떤 종류의 액션이 발생했는지를 식별할 수 있고, 그 외의 필요한 정보는 payload라는 속성을 통해 전달한다.
  • dispatch({type: action이름, payload: 데이터})
• reducer: state가 어떻게 업데이트 될 것인지를 지정하는 함수로, state와 action을 인자로 받고 다음 state를 반환한다.
  • reducer(state, action)
• initialState: 상태의 초기값을 작성한다.
• init : 선택사항으로, 초기값을 반환하는 초기화 함수이다. init 작성 시 init(initialState)를 호출한 결과가 초기값으로 할당된다. 

 

useReducer 예제

1. useReducer를 import한다. 

import { useReducer } from 'react';

 

2. initialState와 reducer를 정의한다. 

  // state의 초기값 설정
  const initialState = { name: "코딩쥐", favorite: "햄버거" };

  // state와 action을 인수로 받아 state업데이트 후에 state 반환
  function reducer(state, action){
    // action의 type에 따라 업데이트 로직 작성
    switch(action.type){
      case "change_name" :
        return({...initialState, name: "codingji"});
      
      case "change_favorite" : 
        return({...initialState, favorite: "치킨"});
      
      default : 
        throw new Error();
    }
  }

 

3. useReducer를 작성한다.

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

 

4. dispatch 함수를 호출하여 상태를 업데이트한다. 

    <div>
      <h1> 이름 : {state.name} </h1>
      <h2> 좋아하는 음식 : {state.favorite}</h2>
      <button onClick={() => dispatch({type: "change_name"})}>이름 변경</button>
      <button onClick={() => dispatch({type: "change_favorite"})}>음식 변경</button>
    </div>

 

만약 init을 사용해서 초기값을 반환한다면, 아래와 같이 initialState의 내용이 아닌 init에서 설정한 반환 값이 초기값으로 적용된 모습을 볼 수 있다.

  function init(){
    return {name: "코딩쥐의 티스토리", favorite: "누워있기"};
  }

 

 

<<예제 전체>>

import { useReducer } from 'react';
import './App.css'

function App() {
  
  // state의 초기값 설정
  const initialState = { name: "코딩쥐", favorite: "햄버거" };

  // state와 action을 인수로 받아 state업데이트 후에 state 반환
  function reducer(state, action){
    // action의 type에 따라 업데이트 로직 작성
    switch(action.type){
      case "change_name" :
        return({...initialState, name: "codingji"});
      
      case "change_favorite" : 
        return({...initialState, favorite: "치킨"});
      
      default : 
        throw new Error();
    }
  }
  
  function init(){
    return {name: "코딩쥐의 티스토리", favorite: "누워있기"};
  }

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

  return(
    <div>
      <h1> 이름 : {state.name} </h1>
      <h2> 좋아하는 음식 : {state.favorite}</h2>
      <button onClick={() => dispatch({type: "change_name"})}>이름 변경</button>
      <button onClick={() => dispatch({type: "change_favorite"})}>음식 변경</button>
    </div>
  )
}

export default App