map이란?
구문
-
arr.map(callback(currentValue[, index[, array]])[, thisArg])
-
map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. callback 함수는 배열 값이 들어있는 인덱스에 대해서만 호출된다.
map 함수를 사용할 때 key를 넣지 않으면 콘솔에 다음과 같은 경고가 뜬다.
<ul>
{toDos.map((item, index) => (
<li>
{item}
<button onClick={deleteBtn}>❌</button>
</li>
))}
</ul>
key란?
-
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
-
경고가 뜨는 이유 -
리액트가 기술적으로 리스트에 있는 모든 요소를 인식할 때 키 값을 기반으로 효율적인 계산을 하기 때문이다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다. 다음과 같이 key를 넣어주면 경고가 사라진다.
<ul>
{toDos.map((item, index) => (
<li key={index}>
{item}
<button onClick={deleteBtn}>❌</button>
</li>
))}
</ul>
하지만 key 값으로 index는 좋은 방법이 아니다. key 값은 다른 값과 겹치면 안 된다. index 값은 배열이 바뀔 시 섞일 수 있다. 고유한 값을 key prop로 부여해야 한다. 대부분의 경우 id를 key값으로 사용한다.
<ul>
{toDos.map((item, index) => (
<li key={item.id}>
{item}
<button onClick={deleteBtn}>❌</button>
</li>
))}
</ul>
https://nomadcoders.co/react-for-beginners/lectures/3287
https://ko.reactjs.org/docs/lists-and-keys.html
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
