리엑트 usestate 데이터 오브젝트화

use state를 일반 배열로 자료를 구성하고 반복문을 사용하는 경우 프로그래밍 효율이 좋지 못하다.
이유는 모든 데이터를 일일이 하나씩 조회하고 모든 데이터를 초기화하고 새로 만들기 때문이다.

하지만 이부분을 자바스크립트에 포함된 오브젝트화 특성
(배열의 일부 데이터만 변경해주는 특성)
을 활용하여 프로그래밍 알고리즘을 조금 바꿔준다면 데이터 사용효율이 향상될 수 있는 예제 코드는 아래와 같다.

const [cards, setCards] = useState([{
    id: '1',
    name: 'sean',
    company: 'no',
    title: 'Fengineer',
    email: 'deathsizes@hotmail.com',
    message: 'go got it',
    fileName: 'nothing',
    fileUrl: 'sean.png',
    theme: 'dark'
  }
  
  //data 받는곳 (혹은 컴퍼넌트)
  {cards.map(card => (
      <CardEditForm 
      key={card.id} 
      card={card} 
      updateCard={updateCard} 
      deleteCard={deleteCard}/>
    ))}
  

를 1키 와 밸류로 변경

const [cards, setCards] = useState({'1' : data}, )

//data 받는곳 
{Object.keys(cards).map(key => (
      <CardEditForm
        key={key}
        card={cards[key]}
        updateCard={updateCard}
        deleteCard={deleteCard}
      />
    ))}

오브젝트 화 하는 것으로 해당하는 키와 벨류값만 변경되는지 조회하여 변경하므로 프로그래밍 작동 효율이 좋아져 성능이 좋아지게 된다.