1/30 TIL

객체배열구조분해할당

const { value, btncolor } = this.state


<input value={value} >
  <button style={{ background: btncolor }}> </button>
  
  

이렇게 render함수 아래서 state 값을 불러올때 this.state.value 와 같이
길게 불러올 필요 없이 state의 키값만을 넣어주어도 된다!

컴포넌트의 key

항목들의 사이에서 순서를 정해준다면 그 배열들을 식별할 수 있어 다양한 추가구현이 가능하다.
React의 key는 돔 요소의 식별을 도와주는 고유한 값이다. !

key는 해당 항목에서 고유하게 식별할 수 있도록 문자열을 사용하는 것이 가장 좋은 방법이라 한다.

예를들면 데이터의 id값!

elements.map(element,index){ }

map은 첫번째 인자로 배열의 요소를 , 두번째 인자로 배열의 순서를 받는다.

하지만 항목의 순서가 바뀔 수 있는 경우는 key값으로 map의 두번째 인자인
index를 주는것이 좋은 방법은 아니다.

데이터들이 추가되고 삭제되고 바뀔경우에 map은 다시 렌더링을 하고 되고 index가 0부터 다시 돌면서 순서는 꼬여버리게 된다.