React 스터디 과제

React 스터디에서 진행한 주차별 과제를 기록하는 저장소입니다.

주차별 구현 내용

1주차 - 투두리스트 기본 기능

• useState를 활용한 todo 상태 관리
• props를 통한 부모·자식 컴포넌트 간 데이터 전달
• 할 일 추가, 완료 상태 변경, 삭제
• 20자 글자 수 확인과 조건부 경고 문구 표시
• 완료된 할 일에 취소선 적용
• Random User API를 활용한 사용자 정보 조회
• 로딩 상태 처리

2주차 - 투두리스트 기능 확장

• 할 일 편집 모드 진입 및 종료
• 조건부 렌더링을 활용한 text와 input 전환
• 수정 내용 저장 및 취소
• 카테고리와 우선순위 필드 추가
• 카테고리별 할 일 필터링
• 전체·완료·미완료 상태 필터
• 최신순·오래된순·우선순위순 정렬
• toSorted()를 활용한 불변 정렬
• derived state 기반의 필터 및 정렬 결과 계산
• React Router를 활용한 메인·상세·설정 페이지 분리
• useParams를 활용한 개별 todo 조회
• useNavigate를 활용한 페이지 이동
• 입력값 공백 제거, Enter 제출, API 오류 처리 개선

주요 기능

기능	설명
할 일 추가	내용, 카테고리, 우선순위를 선택해 새로운 할 일을 추가합니다.
할 일 수정	수정 버튼을 누르면 input으로 전환되며 저장하거나 취소할 수 있습니다.
완료 처리	완료 상태에 따라 취소선을 표시하고 완료·취소 버튼을 전환합니다.
카테고리 필터	전체, 공부, 일상, 운동 카테고리별로 목록을 확인합니다.
상태 필터	전체, 완료, 미완료 상태별로 목록을 확인합니다.
정렬	최신순, 오래된순, 우선순위순으로 목록을 정렬합니다.
상세 페이지	선택한 todo의 내용, 카테고리, 우선순위, 완료 상태를 확인합니다.
사용자 정보	Random User API에서 프로필 사진, 이름, 이메일을 가져옵니다.

페이지 구성

경로	페이지	설명
/	메인 페이지	todo 추가, 수정, 삭제, 필터링, 정렬을 처리합니다.
/todos/:id	상세 페이지	URL의 ID를 이용해 개별 todo 정보를 조회합니다.
/settings	설정 페이지	투두리스트 설정 화면을 표시합니다.

프로젝트 구조

src/
├── components/
│   ├── TaskList.jsx
│   ├── TextInput.jsx
│   ├── TodoItem.jsx
│   └── UserProfile.jsx
├── pages/
│   ├── MainPage.jsx
│   ├── SettingsPage.jsx
│   └── TodoDetailPage.jsx
├── App.jsx
└── main.jsx

기술 스택

• React
• JavaScript
• Vite
• React Router
• Random User API

실행 방법

npm install
npm run dev

개발 서버 실행 후 터미널에 표시된 주소로 접속합니다.

학습 내용

• 함수형 setState를 활용한 안전한 배열 state 업데이트
• map(), filter(), 스프레드 문법을 활용한 불변성 유지
• 이벤트 핸들러에서 사용자 행동 처리
• 삼항 연산자와 &&를 활용한 조건부 렌더링
• early exit를 활용한 validation과 분기 단순화
• toSorted()를 활용한 불변 정렬
• 필터 결과를 별도 state로 저장하지 않는 derived state 구성
• React Router를 활용한 페이지와 URL 분리

자세한 agent-skill 적용 내용은 AGENT_SKILLS.md에서 확인할 수 있습니다.