꼼지락거리기

리액트로 To Do List 만들기

튼튼한간 2022. 12. 8. 17:33

 

To Do List 정도는 껌으로 만들어야하는데, 나는 이가 없는 사람..🤐

힙겹고 어렵게 만들었고, 이제 다시 만들어볼 예정인 To Do List!

밥먹기 같은건 매일매일 잘 할 수 있는데, 리액트 공부하기와 투두리스트 만들기는 언제쯤..

내 자신 화이팅..

 

기능

➕ 누르거나, 엔터를 치면 일정 입력

✔ 를 누르면 텍스트 색 변경 + 중간에 줄 긋기

➖ 누르면 아이템 삭제!

 

 

추가하고 싶은 기능

- 귀여운 폰트로 글씨체 변경

- 글자가 입력되지 않았을 경우 강조표시

 

 

🤦‍♂️ To Do List를 하면서 느끼고 배운 점

  • 과정

1. 그림그리기

2. 전체적인 틀 만들기

3. UI만들기 (전체적인 틀, 입력 추가, 리스트 등)

4. 기능 구현 (체크박스 밑줄, 일정의 추가, 제거, 수정)

  • map함수에는 key값이 필요!
  • e.preventDefault(); 으로 페이지 새로고침을 방지해주기
  • Handelr이라는 함수를 사용

ex) removeItem={removeHandler}, updateItem={updateHandler

  • 내 손가락을 의심하고 또 의심하자. 오타 조심