[React] [감정일기장] - 기초3

//App.js

const onRemove = (targetId) => {
    const newDiaryList = data.filter((it)=> it.id !==targetId);
    setData(newDiaryList);
}

filter : 배열의 각 요소를 확인하고, 제공된 함수에 의해 true를 반환하는 요소들로 새로운 배열을 생성한다.

• targetId와 일치하지 않는 id를 가진 요소들만 newDiaryList에 남도록 필터링

//App.js

const onEdit = (targetId, newContent) => {
    setData(
        data.map((it)=>it.id === targetId ? {...it, content:newContent} : it)
    )
}

map : .map()앞의 적힌 배열의 각 항목을 ()안으로 가져와서 주어진 함수 내부에서 처리한 후, 그 결과를 새로운 배열로 만드는 역할을 함

• 현재 항목(it)의 id가 전달받은 targetID와 동일하면 {...it, newContent} 동일하지 않으면 그대로 it반환

💡 filter 와 map 차이

출처 : https://juejin.cn/post/7114604944900128804

✅ filter : 조건에 맞는 요소를 선택하여 배열로 반환
✅ map : 각 요소를 조건에 맞는 배열로 반환