🌟 React의 Context API: 전역 상태 관리를 쉽게!🔹 Context API란?React에서 props를 사용해 데이터를 전달하면 부모 → 자식 → 손자로 계속 내려야 한다.이 과정에서 prop drilling이 발생하며, 코드가 복잡해지고 유지보수가 어려워진다.이 문제를 해결하기 위해 React의 Context API를 사용하면 된다.Context를 활용하면 컴포넌트 트리 어디서든 데이터를 쉽게 접근할 수 있어,props를 여러 단계 거치지 않고 직접 필요한 곳에서 사용 가능하다.🔹 Context API 구조Context API는 크게 3가지 핵심 요소로 이루어진다.1️⃣ createContext() → 전역으로 사용할 Context를 생성2️⃣ Provider → 하위 컴포넌트에 값을..
혼자 이것저것 공부해보는/TodoList
React 성능 최적화: 효율적인 렌더링을 위한 실전 가이드 🚀React 애플리케이션을 개발할 때 성능 최적화는 매우 중요한 요소다. 불필요한 연산을 줄이고, 불필요한 리렌더링을 방지하며, 메모이제이션 기법을 적절히 활용하면 보다 빠르고 효율적인 UI를 제공할 수 있다. 이번 글에서는 React에서 최적화하는 방법을 살펴본다. ✨ 📝 하지만, 최적화는 기능을 완전히 구현한 후에 하는 것을 권장한다.먼저 기능을 다 만든 후에 어떤 연산이나 함수, 컴포넌트가 최적화가 필요한지 판단한 후 적용하는 것이 좋다.본문에서는 학습을 위해 일부러 더 많은 최적화를 적용했으므로 이 점을 감안하여 보면 좋겠다. 😉1. 컴포넌트 내부 불필요한 연산 방지 ⚡컴포넌트 내부에서 연산량이 많은 함수가 있을 경우, 매번 렌더링..
useState에서 useReducer로 리팩토링하기 🎯 기존 코드: useState 사용React에서 useState를 사용하여 Todo 리스트를 관리할 때, 상태를 직접 업데이트하는 방식으로 구현할 수 있다.const [todos, setTodos] = useState(mockData);각 기능별로 setTodos를 사용하여 새로운 상태를 만들어 반환한다. 하지만 useState를 이용하면 상태 업데이트 로직이 분산되고, 상태 변경이 많아질수록 복잡성이 증가한다.🔥 useReducer 적용useReducer를 사용하면 상태 관리 로직을 하나의 함수(reducer)에 모아 정리할 수 있다. 이를 통해 코드가 더 깔끔해지고, 상태 변경 로직이 분리되어 가독성이 좋아진다.const [todos, dis..
수정하기(onUpdate)와 삭제하기(onDelete) 기능을 구현한 코드를 중심으로, 동작 원리와 상태 관리 방식을 설명합니다.1. 투두 수정하기: onUpdateonUpdate 함수는 특정 투두 아이템의 완료 상태(isDone)를 토글하는 역할을 합니다.todos 배열에서 해당 아이템을 찾아 isDone 값을 반전시키고, 이를 새로운 배열로 업데이트합니다. * isDone : false 일때 * isDone : true 일때 코드 구현const onUpdate = (targetId) => { setTodos( todos.map((todo) => todo.id === targetId ? { ...todo, isDone: !todo.isDone } // 완료 상태 토글 ..
👀구현된 주요 컴포넌트App.jsx (최상위 컴포넌트)전체 애플리케이션의 상태를 관리.useState와 useRef를 사용하여 Todo 데이터를 저장하고 새로운 Todo를 추가하는 함수(onCreate)를 정의.하위 컴포넌트 Header, Editor, List를 조합하여 전체 UI를 구성.Editor.jsx (Todo 입력 및 추가)새로운 Todo를 입력받아 상위 컴포넌트(App.jsx)로 전달.onCreate 함수 호출을 통해 Todo를 추가.List.jsx (Todo 리스트 렌더링 및 검색)Todo 데이터를 받아 화면에 렌더링.사용자가 입력한 검색어를 기준으로 Todo를 필터링하여 출력.TodoItem.jsx (개별 Todo 항목)개별 Todo 항목을 표시.Todo의 content, date 및 ..
* 기능 구현 준비하기 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..
