React 배열에서 key 값이 필요한 이유
key
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
- 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트
- 리액트가 어떤 항목을 변경/추가/삭제할지 식별하는 것을 돕는다.
key값 지정하기
key값은 고유하게 식별 가능한 문자열을 사용한다. (대부분 데이터의 ID)
key가 필요한 이유
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul>
<ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>
- key가 없는 상태에서 위처럼 요소가 추가되면 Duke, Villanova 노드가 유지된 채 Connecticut 노드가 추가되는 것이 아니라 모든 노드가 새로 만들어진다.
<ul>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
<ul>
<li key="2014">Connecticut</li>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
- key가 있다면 Connecticut이 추가될 때 Duke, Villanova 노드는 이동하기만 한다.
주의사항
- key는 형제 사이에서만 고유한 값이어야 한다. (전체 범위에서 고유할 필요는 없다.) 따라서 두 개의 다른 배열을 만들 때에도 동일한 key를 사용할 수 있다.
<ul>
안에 배열을 생성할 때 컴포넌트에 key를 지정해야 한다. (컴포넌트 내부의<li>
에 key를 지정하는 것은 무의미하다.)
// wrong
function ListItem(props) {
const value = props.value;
return (
// 이곳에 key를 지정하면 무의미하다.
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 배열의 ListItem 엘리먼트가 key를 가져야 한다.
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
// right
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
Author And Source
이 문제에 관하여(React 배열에서 key 값이 필요한 이유), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@green9930/React-배열에서-key-값이-필요한-이유저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)