본문 바로가기
React.js

[성능 개선] 배열 보다는 객체를 활용

by 찬찬2 2022. 8. 3.

// #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값만 찾아 변경해주는 것이 효과적일 수 있다.

댓글