10장을 따라하면서 겪었던 에피소드를 적겠습니다.

yarn create

yarn create-react-app 로 해서 안됐습니다.
아래처럼 create 다음에는 '-' 가 없습니다.

yarn create react-app todo-app

Prettier 설정

Prettier 설정 안하고 넘어갔습니다.
이 파일이 없어도 기본 디폴트 파일이 있는것 같습니다.
기본 prettier로 정렬이 되긴합니다.

children

TodoTemplate 안에 insert랑 list가 있고 list안에 item 이 있는 구조인데
TodoTemplate 컴포넌트 안에 insert랑 list 를 넣는 식으로 하지않고, props.children을 통해서 넣었습니다.
제 생각에는 상태를 app 에서 관리하니깐 더 편하게 prop들을 전달할수 있는 것 같습니다.

중앙정렬

Flexbox Froggy 너무 유용했습니다.
width가 주어졌을때 중앙정렬 css가 기억이 납니다.

.TodoTemplate {
	width: 512px;
    margin-left: auto;
    margin-right: auto;
}

react-icons

import 할때 자꾸 react-icon/md 로 s 를 빼먹는 오타를 냈습니다.

map

map을 사용하여 컴포넌트로 변환할 때는 key props를 전달해 주어야 한다고 배웠습니다. 272p
배열이여서 virtualDOM 에서 빠르게 비교판단할수 있습니다.

useCallback

인풋에 넣어줄 onChange 함수도 작성해 주어야 하는데, 이 과정에서 컴포넌트가 리렌더링될 때마다 함수를 새로 만드는 것이 아니라, 한 번 함수를 만들고 재사용할수 있도록 useCallback Hook 을 사용하겠습니다.

일반값은 useMemo를 사용하고 함수는 useCallback을 사용합니다.

useCallback 두번째 인자로 배열이 오는데 이것에 대한 설명은 209쪽에서 하고 있습니다.

useCallback의 첫 번재 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에는 어떤 값이 바귀었을 때 함수를 새로 생성해야 하는지 명시해야합니다. onChange 처럼 비어 있는 배열을 넣게 되면 컴포넌트가 렌더링될 때 단 한 번만 함수가 생성되며, onInsert 처럼 배열 안에 number와 list를 넣게 되면 인풋내용이 바뀌거나 새로운 항목이 추가될 때마다 함수가 생성됩니다.
함수내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 합니다. 예를 들어 onChange의 경우 기존의 값을 조회하지 않고 바로 설정만 하기 때문에 배열이 비어 있어도 상관없지만, onInsert는 기존 number와 list를 조회해서 nextList를 생성하기 때문에 배열 안에 number 와 list를 꼭 넣어주어야합니다.

리액트 개발자 도구

상태를 확인하려면 다른 부분을 클릭했다가 해당 컴포넌트를 클릭해야 변경된 상태가 리액트개발자도구에 업데이트 됩니다.

e.preventDefault()

submit 이벤트는 브라우저에서 새로고침을 발생시킵니다.
이를 방지하기 위해 이 함수를 호출합니다.
e.preventDefault

아이템 삭제

filter를 이용했습니다.
삭제는 리스트에서 해야할까? item에서 해야할까? 고민을 좀 했습니다.
Item 에서 하는게 정답인것 같습니다.

아이템 수정

수정할때는 map을 사용했습니다.
map 함수는 배열을 전체적으로 새로운 형태로 반환하여 새로운 배열을 생성애야 할 때 사용한다고 배웠습니다. 딪금은 딱 하나의 원소만 수정하는데 왜 map을 사용할까요?
결론: 하나만 수정될때도 map이 유용합니다.
onToggle 함수를 보면 todo.id === id ? ... : ... 이라는 삼항 연산자가 사용되었습니다. id 값이 다를 때는 변화를 주지 않고 처음 받아 왔던 상태 그대로 반환합니다. 그렇기 때문에 map을 사용하여 만든 배열에서 변화가 필요한 원소만 업데이트되고 나머지는 그대로 남아 있게 되는 것입니다.