투두리스트 만들기

프로젝트 목표

• React와 CSS를 이용하여 간단한 CRUD 기능이 있는 투두리스트 앱 구현

프로젝트에 사용한 기술

React

• useState, useRef, useCallback 등의 리액트 훅을 사용함

CSS

• 기본적인 스타일 작성

할 일 추가

• 하단의 초록색 플러스 버튼을 누르면 alert창이 뜹니다.
• alert창에 텍스트를 적고 플러스 버튼을 누르면할 일이 목록에 저장됩니다.

체크 기능

• 텍스트를 클릭하면 체크되며 가운데 밑줄이 그어집니다

수정 기능

• 리스트에 있는 항목을 클릭하면 alert창이 뜹니다.
• alert창 Input에 텍스트를 수정 및 입력하고 연필 아이콘을 클릭하면 할 일의 텍스트가 수정됩니다.

삭제 기능

• 리스트에 있는 항목을 클릭하면 alert창이 뜹니다.
• alert창 하단에 빨간색 마이너스 버튼을 누르면 리스트가 삭제됩니다.

스크롤링 기능

• 리스트 스크롤하여 볼 수 있습니다.