지난 글에 이어서 실습 문제 위주로 해볼게요~~
오늘 첫 번째 실습 문제는 저번 TodoList에 기능을 추가하는 것부터 시작해보겠습니다!!
실습 문제 4. Todo 항목 삭제 기능 추가하기
- 추가하는 함수 아래 삭제하는 함수 추가하기
<li> 태그 안에 삭제 버튼 추가하기
↓
** 코드 설명 **
- filter()함수로 삭제할 항목을 제외한 나머지만 유지
- idx !== index : 현재 반복 중인 항목의 번호와 삭제하려는 번호가 다르면 유지
- setTodos(newTodos)로 목록을 업데이트
- hsndleDelete(idx) : 해당 항목의 idx값을 넘겨서 삭제 함수 호출
결과 화면
실습 문제 5. 할 일 완료 체크 기능 추가
- 추가하는 함수 초기 상태 지정하기
- 토글을 체크하면 줄이 그어지게 만들기
- <ul> 기본 스타일 글머리기호 삭제
결과 화면
실습 문제 5. Enter키로 할 일 추가하기
★실무에서도 필수적으로 사용되기 때문에 알아두기!! ★
- <input>태그 안에 추가하기
마지막으로 저번 실습과 이번 실습을 통해 사용한 함수를 최종 정리해보겠습니다~
React에서 제공하는 함수
| 함수명 | 설명 |
| useState() | 상태를 생성하는 React의 기본 함수 |
| setInput() | useState가 자동으로 만들어주는 상태 변경 함수 |
| setTodos() | useState가 자동으로 만들어주는 상태 변경 함수 -> todos 상태를 바꾸는 함수 |
JavaScript 내장 함수
| 함수명 | 설명 |
| map() | 배열을 반복해서 원하는 형식으로 바꿔주는 함수 |
| filter() | 조건을 만족하는 항목만 골라 새로운 배열을 만드는 함수 |
| trim() | 문자열 앞뒤 공백 제거 |
일반 함수
| 함수명 | 설명 | 문법 |
| handleAdd | 할 일 추가 : 입렵값을 배열에 추가하고 입력창 초기화 | const handleAdd = () => {...} |
| handleDelete | 특정 인덱스의 할 일 삭제 | const handleDelete = (index) => {...} |
| toggleDone | 체크박스 클릭 시 done 상태를 | const toggleDone = (index) => {...} |
| (e) => {...} | 이벤트 핸들러 | on이벤트이름={(e) => 실행할 코드} |