리액트 투두리스트 만들기 (3편) : List 수정 및 삭제

 

 

 

그거 아세요~ 

input태그로 만든 체크박스는 

onClick이 아니라 onChange를 쓴답니다 ! 

 

 

---

JS에서 함수이름() 을 쓰면 지금 당장 실행해 ! 

라는 의미가 되어버려서 

onClick={onUpdate(id)} 

=> 이렇게 하면 바로 onUpdate가 실행되어버려 

리랜더링이 되고 또 다시 여기를 읽게 되어 무한 리렌더링이 되어버림 !! 

 

 

onClick={()=>onUpdate(id)}

=> 이렇게 함수를 한번 감싸줘야합니다. 

 

 

---

 

 

 

JS 내장함수 

* map  = 배열의 길이 유지 & 내용 변경 

* filter  = 남기는 것 

 

---

 

{filteredTodos.map((todo)=>{
            return <TodoItem key={todo.id}{...todo} onUpdate = {onUpdate} onDelete={onDelete}/>
        })}

 

 

1 )  list처럼 배열을 화면에 뿌릴 때 key를 꼭 넣어줘야한다. 

2 )  {...todo}  는 스프레드 연산자로 자동으로 todo안에 있는 모든 값에 대해  ->    이름={값}  이렇게 전달해준다.