7주차 : 리액트에서 배열 렌더링 시, key를 써야 하는 이유

React에서의 key의 의미

키는 각 구성 요소가 배열의 어떤 항목에 해당하는지

React에게 알려준다.

 

배열 항목이 이동(예: 정렬)되거나 삽입되거나 삭제될 수 있기에 key 사용이 중요하다.

key를 잘 선택하면, 

React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 올바르게 업데이트하는 데 도움이 된다.

 

key를 어디서 구할까?

 

데이터베이스의 데이터:

데이터가 데이터베이스에서 오는 경우

본질적으로 고유한 데이터베이스 키/ID를 사용할 수 있다.

 

로컬에서 생성된 데이터:

 

데이터가 로컬에서 생성되고 유지되는 경우

(예: 메모 작성 앱의 메모) 항목을 생성할 때

 crypto.randomUUID() 같은 증분 카운터나 패키지를 사용하세요.

 

키의 규칙

키는 형제 간에 고유해야 합니다. 

다른 배열의 JSX 노드에 동일한 키를 사용하는 것은 괜찮다.

그러나 키는 변경되어서는 안 된다

변경되면 키의 의미가 사라진다.

렌더링하는 동안 키를 생성하지 마라.

 

React에 키가 필요한 이유는 무엇입니까?

데스크탑의 파일에 이름이 없다고 상상해 보자.

 첫 번째 파일, 두 번째 파일 등의 순서에 따라 참조한다.

익숙해질 수 있지만 일단 파일을 삭제하면 혼란스러워진다.

두 번째 파일이 첫 번째 파일이 되고, 세 번째 파일이 두 번째 파일이 되기 때문이다.

 

폴더의 파일 이름과 배열의 JSX 키는 비슷한 용도로 사용된다.

이를 통해 형제 간에 항목을 고유하게 식별할 수 있다.

잘 선택된 키는 배열 내의 위치보다 더 많은 정보를 제공한다.

재정렬로 인해 위치가 변경 되더라도 keyReact는 해당 항목을 전체 수명 동안 식별할 수 있다.

 

 

주의

배열에 있는 항목의 인덱스를 키로 사용하고 싶은 유혹을 느낄 수도 있다.

실제로, key를 지정하지 않으면 React가 이를 사용한다.

 

그러나 항목을 삽입하거나 삭제하거나 배열이 재정렬되면

항목을 렌더링하는 순서(인덱스)는 시간이 지남에 따라 변경된다.

인덱스를 키로 사용하면 미묘하고 혼란스러운 버그가 발생할 수 있다.

 

마찬가지로   key={Math.random()}를 사용해서 즉석에서 키를 생성하지 마라.

이로 인해 렌더 간에 키가 일치하지 않아 매번 모든 구성 요소와 DOM이 다시 생성된다.

속도가 느릴 뿐만 아니라 목록 항목 내의 사용자 입력도 손실된다.

 

대신 데이터를 기반으로 안정적인 ID를 사용해라.

key구성 요소는 소품으로 수신되지 않는다 .

이는 React 자체에서 힌트로만 사용된다.

컴포넌트에 ID가 필요한 경우 별도의 prop: 으로 전달해야 한다. <Profile key={id} userId={id} />.