ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • useReducer
    개발/react 2020. 12. 22. 20:59

    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는 복잡한 상태 값, 중복되는 코드가 많이 생겨 일괄적으로 관리가 필요할 때 사용하면 좋을 것 같다.

    '개발 > react' 카테고리의 다른 글

    useContext  (0) 2020.12.22
    useEffect  (1) 2020.12.21
    useState  (0) 2020.12.21
    connect  (0) 2020.12.20
    react router  (0) 2020.12.17

    댓글

Designed by Tistory.