// #1
const [ cards, setCards ] = useState([
{ id: 1, name: "chanki1", age: 21 },
{ id: 2, name: "chanki2", age: 22 },
{ id: 3, name: "chanki3", age: 23 }
]);
const 업데이트 = (card) => {
cards.map( item => {
if(card.id === item.id){
setCards();
}
});
}
위와 같이 map이라는 배열 메서드를 사용하게 되면 배열 안에 있는 모든 원소를 돌고 조건을 대조하여 조건이
참일때 state값을 업데이트해주는데, 문제는 만약 배열의 길이가 길면 길수록 성능저하가 발생할 여지가 있다.
// #2
const [ cards, setCards ] = useState({
"1" : { id: 1, name: "chanki1", age: 21 },
"2" : { id: 2, name: "chanki2", age: 22 },
"3" : { id: 3, name: "chanki1", age: 23 },
});
const 업데이트 = (card) => {
const updated = { ...cards };
updated[card.id] = card;
setCards(updated);
}
위와 같이 키값으로써 업데이트 되어야할 state값만 찾아 변경해주는 것이 효과적일 수 있다.
'React.js' 카테고리의 다른 글
[CSS-in-JS] styled-components (0) | 2022.08.06 |
---|---|
외부에서 컴포넌트 생성 (컴포넌트의 확장성, 재활용성) (0) | 2022.08.03 |
[성능 개선] useState, SetStateAction: prev state에 대한 고찰 (0) | 2022.08.03 |
(터미널) 기본 템플릿 복사 명령어 (0) | 2022.08.02 |
VSC 확장: ES7+ React/Redux/React-Native snippets (0) | 2022.07.14 |
댓글