↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.com To-Do List를 구현하면서, 여러 컴포넌트에서 공통으로 To-Do 데이터가 필요하다는 점을 확인했습니다.Calendar에서는 특정 날짜에 완료되지 않은 To-Do가 있을 경우, 해당 날짜를 특별하게 표시해야 합니다.(추후 구현 예정)TodoContent에서는 ..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.com 이번 포스팅에서는 To-Do List에서 모달 컴포넌트를 구현하고 사용하는 방법에 대해 다뤄보겠습니다.이 모달 컴포넌트는 '할 일 추가하기' 기능을 위한 UI를 구현한 것으로, 추후 실제 기능 구현이나 수정 기능에도 재사용할 수 있도록 유연하게 설계되었습니다. 모달..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.comTo-Do List를 개발하면서, 단순한 리스트 디자인보다는 조금 더 재미있는 디자인을 적용해보고 싶었습니다. 그래서 줄 공책 스타일의 디자인을 적용하기로 결정했습니다. 이 글에서는 줄 공책 같은 디자인을 구현하기 위해 사용한 CSS와 그 원리에 대해 자세히 설명하겠..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.com  React를 공부하면서 단순한 To-Do List 대신 조금 더 재미있게 만들고 싶었습니다. 그래서 JavaScript의 Date 객체에 대 해 좀 더 깊이 공부할 겸 달력형 To-Do List를 만들어보기로 했습니다. 이번 포스팅에서는 그 첫 번째 단계로 달력을..

React는 컴포넌트 기반의 라이브러리로, 컴포넌트 간의 데이터 전달은 일반적으로 props를 통해 이루어집니다.하지만 중첩된 컴포넌트 구조에서 여러 단계를 거쳐 데이터를 전달하는 것은 비효율적이고 복잡할 수 있습니다.이를 해결하기 위해 React는 Context API를 제공합니다.useContext란?useContext는 React에서 Context 객체를 가져와서 사용할 수 있게 해주는 훅입니다. Context는 전역적으로 데이터를 공유할 수 있게 해주는 메커니즘으로, 특정 트리 구조의 하위 컴포넌트에 데이터를 직접 전달하지 않고도 접근할 수 있게 합니다.useContext의 사용 방법useContext를 사용하려면 먼저 Context 객체를 생성해야 합니다. 그런 다음, 이 Context를 사용하..

리액트 애플리케이션을 개발하면서 상태 관리가 점점 더 복잡해질 수 있습니다.이런 상황에서 리액트가 제공하는 여러 가지 훅을 사용하면 상태 관리가 훨씬 수월해집니다.이번 글에서는 useReducer, useImmer 두 가지 훅을 살펴보고, 이들이 각각 어떤 상황에서 유용한지, 그리고 어떻게 사용하는지 알아보겠습니다.1. useReducer란?useReducer는 리액트에서 상태 관리 로직을 깔끔하게 정리해주는 훅입니다.useState와 비슷하게 상태를 관리하지만, 상태 변화 로직이 복잡하거나 여러 가지 상태를 한꺼번에 관리해야 할 때 useReducer가 더 유용합니다. useReducer 기본 사용법const [state, dispatch] = useReducer(reducer, initialState..