useReducer

useReducer는 useState랑 비슷하나 state 업데이트 작업을 담당하는 reducer를 직접 넣어 줄 수 있다는 점이 다르다. 아래 코드에서 주석으로 처리된 useState 코드는 두번째 인자로 state 값을 업데이트 하는 작업을 일괄 담당했는데, useReducer를 사용하면 커스텀 reducer를 추가할 수 있어 action의 타입에 따라서 다른 행동을 취하도록 할 수 있다. 

 

useReducer도 useState처럼 리턴 값은 배열이며 첫번째 인자는 state 값이고 두번째 인자는 reducer에 액션을 보낼 수 있는 dispatch 함수다. 값을 업데이트 할 때는 dispatch 함수에 action 을 설정해서 업데이트 한다.

 

import React, { useEffect, useReducer } from 'react';
import notesReducer from '../reducers/notes';

const NoteApp = () => {
  
    // const [notes, setNotes] = useState([])
    const [notes, dispatch] = useReducer(notesReducer, [])
    
    
// 

const notesReducer = (state, action) => {
    switch (action.type) {
      case 'POPULATE_NOTES':
        return action.notes
      case 'ADD_NOTE':
        return [
          ...state,
          {
            title: action.title, body: action.body
          }
        ]
      case 'REMOVE_NOTE':
        return state.filter((note) => note.title !== action.title)
      default: 
        return state
    }
}

export { notesReducer as default }

 

아래는 Note 를 추가하고 제거하는 작업의 코드다. useState를 사용할 때는 setNote를 이용해서 바로 업데이트 하는 코드를 넣었다면 useReducer에 넣어둔 Reducer를 이용해 action 과 인자를 전달해서 작업을 넘길 수 있다. 액션을 추가하는 코드는 useReducer에서 받아온 dispatch 함수를 사용한다.

 

const addNote = (e) => {
  e.preventDefault()

  // setNotes([
  //   ...notes, 
  //    { title, body }
  // ])
  dispatch({
    type: 'ADD_NOTE',
    title,
    body
  })
}

const removeNote = (title) => {
  dispatch({
    type: 'REMOVE_NOTE',
    title
  })
  // setNotes(notes.filter((note) => note.title !== title))
}

 

useState는 간단한 상태값을 담당할 때 사용한다면 useReducer는 복잡한 상태 값, 중복되는 코드가 많이 생겨 일괄적으로 관리가 필요할 때 사용하면 좋을 것 같다.