Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

const number = [1, 2, 3, 4, 5];
const listItems = number.map((number) => 
	<li key={number.toString()}>
		{number}
    </li>
 );

Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용한다.

const datas = [
	{
    	id: 0,
        name: 조던,
        team: 개발팀
    },
    {
    	id: 1,
        name: 제나
        team: 기획팀
    },
    {
    	id: 2,
        name: 제임스
        team: 개발팀
    },
]

const items = datas.map((data) => {
	<li key={data.id}>
    	{data.name}
    </li>
...

위의 코드에서는 id를 key로 사용하는 것이 좋다.

  const datas = [
    { category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football" },
    { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball" },
    { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basektball" },
    { category: "Electronics", price: "$99.99", stocked: true, name: "ipod Touch" },
    { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5" },
    { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" },
  ]
  
const items = datas.map((data, idx) =>{
	<li key={idx}>
    	{data.name}
    </li>
...
 

인덱스를 key로 설정하는것이 좋지는 않지만 위의 코드에서는 고유하게 식별할 문자열이 없기 때문에 인덱스를 key로 사용한다.

Key는 형제 사이에서만 고유한 값이어야 한다.

key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다. 두개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.

const datas = [
	{
    	id: 0,
        name: 조던,
        team: 개발팀
    },
    {
    	id: 1,
        name: 제나
        team: 기획팀
    },
    {
    	id: 2,
        name: 제임스
        team: 개발팀
    },
]

...

const items = datas.map((data) => {
	<li key={data.id}>
    	{data.name}
    </li>
...

const item = datas.map((data) => {
	<li key={data.id}>
    	{data.team}
    </li>
...