function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
일반적으로 Component 안에서 리스트를 렌더링합니다.
이 코드를 실행하면 리스트의 각 항목에 key 를 넣어야 한다는 경고가 표시됩니다.
“key”는 Element 리스트를 만들 때 포함해야 하는 특수한 문자열 속성입니다.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
key는 Element에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 합니다.
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.
const todoItems = todos.map((todo) =>
// Only do this if items have no stable IDs
// (항목에 안정적인 ID가 없는 경우에만 이 작업을 수행합니다.)
<li key={todo.id}>
{todo.text}
</li>
);
항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 Component의 state와 관련된 문제가 발생할 수 있습니다.