리액트 8 - 리스트와 Key

오늘 알아볼 것

• 여러개의 컴포넌트를 렌더링
  *이런 모양은 바람직하지 못하다.

이런 경우 배열을 만들어 map을 통해 중복코드를 줄일 수 있다.

const arr = Array(30).fill(1).map( ( v, i ) => v + i );
// 1~30까지의 숫자가 담긴 배열 생성
<WarpUL>
	{ arr.map(( data ) => (
		<RoomList key = {`room_${data}`} id ={data} text={`${data}룸`} />
	)}
</WarpUL>

데이터를 받아서 생성하는 경우

//데이터 예시
const data = [
	{ 
		id: "12312dsfjoewifjweidss",
		name:"홍길동",
		age: 18,
		목표: "~",
	},
	{
		id: "123jsfioj123oi9df",
		name:"아무개",
		age:20,
		목표:"~~",
	}
]

<WarpUL>
	{ data.map(( {id, name, age} ) => (
		<List key = {`person_${id}`} name ={name} age={`${data.age}살`} />
	)}
</WarpUL>

Key

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

Key가 왜 필요할까?

<ul>
	<li>1번</li>
	<li>2번</li>
</ul>

--------3번을 추가했다------------

<ul>
	<li>1번</li>
	<li>2번</li>
	<li>3번</li>
</ul>

이 경우 리액트는 1,2,3이 다 달라졌다고 판단해서 전부 다시 렌더링하게 된다.
그러나 key값이 있는 경우에는 3번 리스트만 추가하는 방식으로 일부분만 변경한다.

보통 데이터에 고유의 ID문자열을 사용하지만, ID가 없는 경우 최후의 수단으로 index를 사용할수도 있다. 그렇지만 위의 문제가 비슷하게 발생하기 때문에 사용을 지양해야 한다.

nanoid를 사용하여 ID가 없는 경우에 대비할 수 있도록 하는게 좋겠다.
https://github.com/ai/nanoid/