반응 키 - 맵에서만이 아님

키 🦅의 고유한 사용 사례로 건너뛰기

핵심 소품은 무엇입니까? 🗝

핵심 소품은 최적화에 관한 것입니다.
키를 설정하면 어떤 특정 항목이 변경되어 다시 렌더링해야 하는지 React에 알립니다. 이는 React가 전체 목록 대신 변경된 항목만 다시 렌더링하기 때문에 성능상의 이유로 중요합니다.

key는 변경, 추가 또는 제거된 항목을 식별하는 데 사용됩니다.

key는 주변 배열의 맥락에서만 의미가 있습니다.

key는 string 또는 number입니다. 키를 선택하는 가장 좋은 방법은 형제 중에서 목록 항목을 고유하게 식별하는 string를 사용하는 것입니다. 대부분의 경우 데이터의 ID를 키로 사용합니다.

key는 구성 요소를 통해 React의 Virtual DOM로 전달되며 값에 액세스하기 위해 props에서 파괴될 수 없습니다.

핵심 소품의 고유한 사용 사례

◈ UI 깜박임 방지

UI 깜박임 - 키 사용

UI 깜박임 - 키 없음

그 차이는 미묘하지만 첫 번째 버튼(Stack 구성 요소의 자식을 변경함)을 누른 후 파란색 배경이 잠시 남아 있음을 볼 수 있습니다.

자식을 래핑하기 위해 React.Fragment를 사용하기 때문에 발생합니다. div 또는 다른 래핑 태그를 사용하는 경우 깜박임이 표시되지 않습니다.

So why not just do that instead you ask?
By wrapping with a div, for example, we will only have one child and the gap="20px" prop won't apply.
In this case, it is a styling preference to wrap it with React.Fragment.

◈ 새 컴포넌트 인스턴스 마운트(by )

onChange 이벤트 대신 input 소품을 사용하여 상태를 key에 연결합니다.
상태가 변경될 때마다 input 의 새 구성 요소 인스턴스를 마운트합니다.

try commenting-out the key prop and see that the input's value doesn't change.

◈ 배열의 모든 React Node에 수동으로 키 추가

그다지 독특하지는 않지만 여기에는 지도가 없기 때문에 쉽게 무시할 수 있습니다.
반응 노드(반응 구성 요소)의 배열인 prop을 전달할 때 각 노드에 고유key를 추가해야 합니다.

<Main actions={[<PlusChar key="plus-char" />, <MinusChar key="minus-char" />]} />

키를 전달하지 않으면 일반적인 경고가 표시됩니다.


게다가 우리는 key가 제공하는 최적화를 즐기지 못할 것입니다.

결론:

key가 없으면 단순한 경고 이상을 유발할 수 있습니다.
UI 깜박임이 발생하거나 새 구성 요소 인스턴스를 강제로 마운트할 수 있습니다.