React 공부할끄니까! Reducer로 State 업데이트 통합 관리?!

한 컴포넌트에 State 업데이트를 담당하는 이벤트 핸들러가 여러 개 있는 경우가 있다. 이럴 때는 Reducer를 이용해 컴포넌트에서 State 업데이트 로직을 분리해 한 군데서 관리할 수 있도록 해준다.

아래와 같이 Todo 컴포넌트에 todos의 상태를 업데이트하는 핸들러가 여러 개 있다면

const [todos, setTodos] = useState([])
const [todoContent, setTodoContent] = useState('')

export default function AppToo() { 
    const handleAddTodo = () => { 
        setTodos([
            ...todos, 
            {id: todos.length, content: todoContent, done: false}
        ])
        setTodoContent('')
    }

    const handleAddTodoAt = () => { 
        // .. 
    }

    const handleDeleteTodo = (id?: number) => { 
        // ..
    }
}

이들을 컴포넌트에서 분리하고 todos.reducer.ts에서 단일 함수로 통합 관리하게 만들 수 있다.

export default function todosReducer(todos, action) { 
    switch(action.type) { 
        const { id, content } = action 
        case 'add': { 
            return [...todos, {id, content, done: false}]
        }
        default: { 
            throw new Error(`Unknown action type`)
        }
    }
}

export default function AppTodo() { 
    const [todos, dispatch] = useReducer(todosReducer, [])

    const handleAddTodo = () => { 
        dispatch({
            type: 'add'
            id: todos.length,
            content: todoContent
        })
        setTodoContent('')
    }
}

필요하다면 use-immer 라이브러리의 useImmerReducer를 활용할 수도 있다.［2］

References.

• ［1］reducer를 활용해 state 로직 통합하기
• ［2］userImmerReducer