0911 TIL1.

OnChange의 렌더링 최적화를 위해서

onChange안에 있는 setState에 prev을 이용하여 렌더링 최적화를 해준다

onChange={(e)=>{
  setState((prev)=>{
  if(prev !== e.target.value) {
    return  e.target.value;
	  	    }
  		})
	}

Remove 문제

• 원인 : 삭제버튼을 누르면 전부다 삭제되는 현상

//문제 removeMemo 

removeMemo(id){
set(state=>({
memoList:[state.memoList.filter(e=>e.id!==id)],
})
}

원하던 기술은 버튼누르면 해당 id와 맞는 컴포넌트만 언마운트되어야하는데 그러지않았다.

생각해보니 removeMemo 함수 안에있는 memoList 키에 [] 배열을 넣으면 배열이 중첩되는현상이 생길거같았다.
state.memoList 자체가 배열인데 기존배열위에 배열을 한번감싸니 삭제버튼을 누르는순간 배열이 바뀌어버려 전부다 없어지는현상(삭제되는거처럼보임)

• 해결

//문제 removeMemo 

removeMemo(id){
set(state=>({
memoList:state.memoList.filter(e=>e.id!==id),
})
}

addMemo 처럼 작성하다가 생긴 오류인것 같다.