Object.keys

우리가 원하는 card에 있는 아이디를 키로 이용하고
card자체 오브젝트를 밸류로 쓸 거에요

1. obj형태로 데이터 변경
2. cards는 이제 obj. map을 할 수 있는 상태로 만들어줘야함

 

 

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다.

// 단순 배열
const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// 배열형 객체
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// 키와 순서가 무작위인 배열형 객체
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// getFoo 는 열거할 수 없는 속성입니다.
const myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

 

예제:

 

기본 개념:  아래와 같이 id값을 key로 이용하고 읽고자 하는 오브젝트를 value로 하는 key:value쌍을 만들어서 사용한다

const card = {
  id:11, name:'pdkk', age:35
}
const e ={
  id: card, dname:'elele'
}
console.log(e.id)
console.log(e['id'])
> Object { id: 11, name: "pdkk", age: 35 }
> Object { id: 11, name: "pdkk", age: 35

우리가 원하는 card에 있는 아이디를 키로 이용하고
card자체 오브젝트를 밸류로 쓸 거에요

 

Object.key(cards).map~

cards[key]가 하나의 세트로 사용// obj의 key를 추출한 뒤 그 obj의 key값을이용하여 원소값을 추출

 

 

 

실제 프로젝트 예시

 

기존 데이터 및 코드

 //기존 데이터
 const [cards, setCard] = useState([
     {
      id: "1",
      name: "Ellie",
      company: "Samsung",
      theme: "dark",
      title: "Software Engineer",
      email: "eliie@gmail.com",
      message: "go for it",
      fileName: "ellie",
      fileURL: null,
    },
    {
      id: "2",
      name: "pdk",
      company: "SI",
      theme: "light",
      title: "Software Engineer",
      email: "pdk@gmail.com",
      message: "go for it",
      fileName: "ellie",
      fileURL: null,
    },
  ]);

// maker component
const updateCard = (card) => {
  const updated = cards.map((item) => {
    if (card.id === item.id) {
      return m;
    }
    return item;
  });
};

// editor component
cards.map(card => {
	<CardEditForm
 		card={card}
    	onSubmit={deleteCard}
   	 	updateCard={updateCard}
    	deleteCard={deleteCard}
    	FileInput={FileInput}
	>
  });

// card_edit_form component
const onChange = (event) => {
    if (!event.currentTarget == null) {
      return;
    }
    event.preventDefault();
    updateCard({
      ...card,
      [event.currentTarget.name]: event.currentTarget.value,
    });
  };

배열 데이터가 순차적으로 들어있음
배열(cards)를 map을 이용해 순차적으로 돔.
기존 cards에 3개의 데이터가 있다고 가정하고 4번째의 데이터를 추가해주기 위해서 map이 4번돌아야함
즉 동일한 id가 나올 때 까지 끝까지 갔다가 변경된 아이만 업데이트 함
알고리즘을 수행하는속도 = 배열의 길이 k (1000이라고 치면 데이터 하나를 추가하기 위해 1000번 돌아야함)

 

 

변경 데이터 및 코드

const [cards, setCard] = useState({
    1: {
      id: "1",
      name: "Ellie",
      company: "Samsung",
      theme: "dark",
      title: "Software Engineer",
      email: "eliie@gmail.com",
      message: "go for it",
      fileName: "ellie",
      fileURL: null,
    },
    2: {
      id: "2",
      name: "pdk",
      company: "SI",
      theme: "light",
      title: "Software Engineer",
      email: "pdk@gmail.com",
      message: "go for it",
      fileName: "ellie",
      fileURL: null,
    }
    })
    
   //Maker Component
   
     const createOrUpdateCard = (card) => {
    setCard((cards) => {
      const updated = { ...cards };
      updated[card.id] = card;
      return updated;
    });
  };
  
  //Editor Component
  
  const Editor = ({ FileInput, cards, addCard, updateCard, deleteCard }) => (
  <section className={styles.editor}>
    <h1 className={styles.title}>Editor</h1>
    {Object.keys(cards).map((key) => (
      <CardEditForm
        card={cards[key]}
        key={key}
        onSubmit={deleteCard}
        updateCard={updateCard}
        deleteCard={deleteCard}
        FileInput={FileInput}
      />
    ))}
    <CardAddForm onAdd={addCard} FileInput={FileInput} />
  </section>
);

 

 

출처:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys