#13 React - 복잡한 상태 관리 로직 분리하기 - useReducer() - React로 투두리스트 만들기(4)

오늘은 컴포넌트에서 복잡한 상태 관리 로직을 분리하는 방법에 대해 정리해보려고 한다! 0.

복잡한 상태 관리 로직을 컴포넌트에서 분리해야 하는 이유 Edit 컴포넌트를 살펴보면 todoList state를 업데이트하는 로직이 많이 들어가 있다. const Edit = () => { // 사용자 입력 처리 state const [todos, setTodos] = useState(""); // todolist 저장 배열 state const [todoList, setTodolist] = useState([]); // 사용자 입력 상태 변화 const onChange = (e) => { setTodos(e.target.value); }; // 추가 버튼 클릭 시 todolist state에 입력값 저장 const onSubmit = (e) => { e.preventDefault(); const newTodo = { text: todos, id: Date.now() }; setTodoLis...