지겨운(?) todo app을 만들어 보겠습니다😭

Todo App 컴포넌트 구조

1. TodoTemplate
2. TodoInsert
3. TodoList
4. TodoListItem

   💡 컴포넌트 import 자동완성 : 탭이 닫혀 있어도 자동완성 하기
   -> { "compilerOptions" : {target: "es6"}}

기능 구현

1. App에서 상태관리

   • 여러 종류의 값을 전달해야 하는 경우에는 객체로 만들어 통째로 전달해야 성능 최적화 때 편리함

2. TodoInsert 에서 인풋 상태 관리

   • 리액트 컴포넌트 쪽에서 해당 인풋에 무엇이 입력되어 있는지 추적하기 위한 도구
     -> 리액트 개발자 도구

     확인 방법 -> Component 탭에서 해당 컴포넌트의 state 확인

   • todos 배열에 새 객체 추가
     -> useState 가 아닌 useRef 사용, 이유는 id 값은 렌더링되는 정보가 아니기 때문 (단순 참고되는 값이라서)

   • ❗️Props로 전달해야 하는 함수를 만들 때는 useCallback 으로 감싸기

   • 엔터를 첬을 떄도 등록이 쉽게하기 위해 onClick 대신 onSubmit을 사용

삭제 기능

• 불변성 유지하면서 삭제 -> filter 사용 (조건에 참이어야 새로운 배열 반환)

수정 기능

• 불변성 유지하면서 특정 배열 원소를 업데이트 할 떈 map() 사용

  map() 을 사용할 때 {}를 사용하면 오류가 생기므로 주의, ()를 사용