[React+TS] 달력 기반 투두 리스트로 확장, UI/UX와 상태 관리의 조화

본 포스팅은 프로젝트 회고를 목적으로 작성되었습니다.

 

 

프로젝트 결정 계기

 이번 프로젝트는 기존에 개발한 투두리스트 애플리케이션을 달력 기반 투두 관리 시스템으로 확장하며, React와 TypeScript의 강점을 활용해 상태 관리와 UI 설계 역량을 한 단계 더 업그레이드하는 것을 목표로 했습니다.

[React+TS] 투두리스트와 다크모드 결합을 통해 알아본 타입 좁히기

 

기존 투두리스트 프로젝트에서는

 이전 프로젝트에서는 기본 투두리스트를 구현하며 TypeScript의 타입 좁히기와 같은 개념을 학습했습니다. 이를 통해 타입 안정성을 확보하며 개발할 수 있는 자신감을 얻었고, React 상태 관리의 기초를 다질 수 있었습니다. 하지만 날짜별 데이터를 관리하거나 UI를 확장하는 기능은 포함되어 있지 않아, 이 부분을 발전시킬 필요성을 느꼈습니다.

 

확장의 필요성

 단순한 투두리스트에서 달력 기반으로 프로젝트를 확장하면 다음과 같은 기대효과를 얻을 수 있을 것으로 판단했습니다.

1. 상태 관리 업그레이드
  - 날짜별 데이터를 효율적으로 관리하는 상태 설계
  - 날짜 선택에 따라 투두리스트를 동적으로 업데이트하는 렌더링 로직

2. UI/UX 설계
  - 직관적인 달력 UI 설계
  - 달 이동, 요일 표시 등 사용자 경험 향상을 위한 상호작용 추가

3. TypeScript 활용
  - 더 복잡한 데이터 구조와 Props 관리를 통해 타입 안정성 강화
  - 정적 타입 시스템을 활용해 유지보수성과 협업 효율성 증가

 

TypeScript의 역할

 이 프로젝트에서는 TypeScript를 활용하여 상태와 데이터 흐름의 안정성을 보장하고, React 컴포넌트 간 데이터 전달을 명확히 설계하는 것을 목표로 했습니다.

타입 선언의 중요성
  - 날짜별 투두리스트 관리를 위해 Record<string, Todo[]> 구조를 사용.
  - Props를 명확히 정의하여 컴포넌트 간 데이터 흐름 오류를 방지.

타입 좁히기
  - 날짜와 투두리스트의 상태를 조작하는 로직에서 TypeScript의 타입 추론과 타입 좁히기를 활용

 

 결과적으로, 달력 기능 추가를 통해 날짜별 데이터 관리를 설계하고 달 이동과 선택된 날짜를 강조하는 UI를 통해 사용성을 높이도록 계획했습니다.

 

 더불어, 투두데이터를 날짜별로 관리하기 위한 상태 설계와 동적 렌더링을 학습했습니다. 이 과정에서 날짜 선택과 상태 업데이트가 자연스럽게 연결되도록 구조화하였습니다. 기능 확장을 통해 복잡한 상태 구조에 타입을 적용함으로써 개발 안정성을 높였습니다.

 

프로젝트 주제 선택 이유

 투두리스트는 기능이 단순하지만 상태 관리와 UI 설계에 많은 가능성을 제공하는 주제입니다. 이 과정에서 달력 기반 투두 관리는 다음과 같은 점에서 좋은 주제라고 판단했습니다.

- 날짜별 데이터 관리를 통해 상태 관리의 확장성을 학습
- 달력 UI를 설계하면서 React 컴포넌트 구조와 이벤트 처리 방식을 심화 학습
- TypeScript를 통해 데이터 구조를 명확히 함으로써 유지보수성을 향상

 

프로젝트 진행

날짜별 투두 상태 관리

const [todosByDate, setTodosByDate] = useState<Record<string, Todo[]>>({});
const [selectedDate, setSelectedDate] = useState<string>(
  new Date().toISOString().split('T')[0] // 오늘 날짜
);

 

 TypeScript는 todosByDate를 Record<string, Todo[]>로 정의해 날짜별 투두 데이터를 안전하게 관리합니다 . selectedDate는 현재 선택된 날짜를 나타내기 때문에 항상 유효한 날짜 문자열입니다.

 

 이를 통해 React 상태 관리에서 중첩된 객체와 동적 키를 다루는 방법을 익혔습니다.

 

달력 UI 구현

const daysInMonth = new Date(
  currentMonth.getFullYear(),
  currentMonth.getMonth() + 1,
  0
).getDate();

const goToPreviousMonth = () => {
  setCurrentMonth(
    new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
  );
};

const goToNextMonth = () => {
  setCurrentMonth(
    new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
  );
};

 

 달력 컴포넌트를 추가 생성해 현재 월의 날짜를 계산하고 달력 UI를 동적으로 렌더링했습니다. 이때 선택된 날짜를 강조하여 UX를 향상했으며, 이전과 다음 달로 이동할 수 있습니다.

 

 TypeScript를 통해 Date 객체를 활용해 현재 월의 일수를 동적으로 계산했으며, 달 이동 시 Date 객체를 이용해 월 값을 정확히 업데이트하였습니다. 이 때 Date 타입을 사용해 날짜 처리 관련 오류를 방지했습니다.

 

요일 표기 및 날짜 강조

const weekDays = ['일', '월', '화', '수', '목', '금', '토'];

<div className="calendar-weekdays">
  {weekDays.map((day) => (
    <span key={day} className="calendar-weekday">
      {day}
    </span>
  ))}
</div>

<button
  className={`calendar-day ${
    selectedDate === dateString ? 'selected' : ''
  }`}
  onClick={() => setSelectedDate(dateString)}
>
  {day}
</button>

 

map을 반복 렌더링해 선택된 날짜와 일반 날짜를 구분하는 스타일링을 적용합니다. 또한 달력 상단에 요일을 표시해줍니다.

 

 이 때, 요일 데이터(weekDays 배열)는 고정된 문자열 배열로 관리하며 클릭 이벤트 발생시 setSelectedDate 상태를 업데이트해 반응형으로 렌더링할 수 있도록 구현했습니다.

날짜별 투두리스트 필터링

<TodoList
  todos={todosByDate[selectedDate] || []}
  toggleStatus={toggleTodoStatus}
  deleteTodo={deleteTodo}
/>

 

todoByDate[selectedDate]로 해당 날짜의 리스트를 안전하게 가져옵니다. 값이 없을 경우 빈 배열을 반환하여 오류를 방지하며, 특정 날짜 데이터를 안전하게 수정하도록 만들었습니다. 

 

 이 기능은 선택된 날짜의 투두리스트만 렌더링해 해당 날짜에만 국한해 투두리스트를 가져오도록 업데이트합니다.

마치며

 달력 기반 투두리스트 프로젝트는 상태 관리, UI 설계, TypeScript 활용이라는 세 가지 목표를 모두 충족할 수 있는 적합한 주제였습니다. 이 과정에서 날짜별 데이터를 동적으로 관리하고, 달력 컴포넌트를 설계하며 React와 TypeScript의 강점을 체감할 수 있었습니다.

 

 무엇보다 달력 기반 프로젝트를 진행해보고 싶었는데 이 프로젝트를 성공하며 한 단계 더 성장할 수 있어 기쁩니다💗