리스트 element를 만들려면 key를 포함해야 한다
Key가 있어야 React가 어떤 항목을 변경,추가 또는 삭제할 지 식별할 수 있음 (고유성 부여)
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
)}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);
대부분의 경우 데이터의 id를 key로 사용
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
정 안되면 index를 key로 사용하지만 state와 관련한 문제가 생길 수 있음
{numbers.map((number, index) =>
<ListItem key={index} value={number} />
)}
key의 context
key는 주변 배열의 context에서만 의미가 있기 때문에 추출하려는 컴포넌트 내의 엘리먼트가 아니라 배열의 element가 key를 가져야 함
전체 범위에서 고유할 필요는 없고 같은 형제 element 사이에서만 고유하면 됨
function ListItem(props) {
// 여기는 key 지정 필요 X
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 여기에 key 지정
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
key는 props로 전달되지 않음