useState에서 useReducer로 리팩토링하기 🎯 기존 코드: useState 사용React에서 useState를 사용하여 Todo 리스트를 관리할 때, 상태를 직접 업데이트하는 방식으로 구현할 수 있다.const [todos, setTodos] = useState(mockData);각 기능별로 setTodos를 사용하여 새로운 상태를 만들어 반환한다. 하지만 useState를 이용하면 상태 업데이트 로직이 분산되고, 상태 변경이 많아질수록 복잡성이 증가한다.🔥 useReducer 적용useReducer를 사용하면 상태 관리 로직을 하나의 함수(reducer)에 모아 정리할 수 있다. 이를 통해 코드가 더 깔끔해지고, 상태 변경 로직이 분리되어 가독성이 좋아진다.const [todos, dis..
react
* 기능 구현 준비하기 1. Editor 컴포넌트에 새로운 투두를 입력하고 추가 버튼을 클릭하면 List 컴포넌트에 새로운 투두가 바로 추가되어야 함. 2. 추가된 투두를 List 컴포넌트 내부에서 수정 및 삭제가 가능해야 함. 3. 이미 추가 된 투두가 검색창에서 검색도 가능해야 함. 즉 , 정리해보자면 다음과 같은 구현이 필요하다. - Todo 추가하기 - Todo 리스트 렌더링 하기- Todo 수정하기 - Todo 삭제하기 본격적인 기능 구현에 앞서, 상태 관리 (State)를 추가해주고 더미 데이터를 만들어 두기로 하자 . 1. React의 useState를 사용하여 Todo 목록을 상태로 관리 const [todos, setTodos] = useState(mockData); 💡 to..
1. Components 구성Header.jsxEditor.jsxList.jsx 본격적인 UI에 들어가기 앞서 Header, Editor, List 컴포넌트들로 구성해주고App.css 스타일을 이용해 중앙으로 배치 시켜줬다. App.css .App { width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap : 10px; } 💡 gap은 display: flex 요소일 경우에만 사용 가능 2. Header 컴포넌트 UI 텍스트와 현재 날짜를 넣어준다. Header.jsx import "./Header.css";const Header = () => { return ( 오늘은 👀 {new D..
