React에서 키의 올바른 사용

용법

키는 UI를 업데이트하는 동안 UI에 적용해야 하는 변경 사항을 결정하기 위해 React 내부 알고리즘(조정 또는 React의 "diffing"알고리즘)에서 사용됩니다.

React 이전에는 브라우저가 모든 변경 사항에 대해 전체 UI를 다시 그려야 했습니다. 심지어 다시 그려야 하는 화면의 작은 하위 집합도 마찬가지였습니다.

React에는 구성 요소와 해당 dom 요소를 포함하는 완전한 앱의 가상 dom 트리를 생성하는 매우 효율적인 알고리즘이 있습니다. 사용자 상호 작용의 효과로 UI에 변경이 필요한 경우(예: 어두운 테마와 밝은 테마 간 전환) 또는 백엔드에서 트리거한 일부 변경(알림 수신)에 대해 자세히 읽을 수 있습니다here.

키의 중요성/사용으로 돌아가서, React는 가장 효율적인 방식으로 성능을 최적화하거나 화면을 다시 칠할 수 있도록 영구적이고 고유한 속성을 키로 사용하는 개발자(개발자)에 의존합니다.

잘못된 키 사용의 부작용

구성 요소의 키가 업데이트되면(a에서 b로 변경) React는 현재 구성 요소를 삭제/비우고 구성 요소의 새 인스턴스를 만듭니다.

여기에서 componentDidMount, ComponentWillMount(새로 마운트된 인스턴스의 경우) 및 componentUnMount(이전 인스턴스의 경우)와 같은 구성 요소 수명 주기 메서드가 호출됩니다.

예를 들어 - componentDidMount의 네트워크 호출은 원할 수도 있고 원하지 않을 수도 있는 다시 호출됩니다.

해야 할 일

고유하고 영구적인 속성을 키로 사용합니다.

키는 형제 내에서 고유해야 합니다. 전체 앱에서 고유하게 만들 필요가 없습니다.
예를 들어 -

const Item = (item) => {
    return (
        <li>{item.value}</li>
    )
}

const Home = () => {
    const itemList = [{id: '#1',value: 'hello world'}, {id: '#2',value: 'second line'}, {id: '#3',value: 'third line'}]
    return (
        <div>
        <ul>
            {itemList.map((item) => {
                return <Item key={item.id} item={item}/>
            })}
        </ul>
        // incorrect or no need for prefixing random text
        <ul>
            {itemList.map((item) => {
                return <Item key={'secondarray'-${item.id}} item={item}/>
            })}
        </ul>
        </div>
    )
}

금지 사항

런타임에 ID를 키로 생성하지 않습니다. 모든 렌더링 주기(런타임)에서 새 ID가 생성됩니다. 이는 불필요한 구성 요소 마운트 및 마운트 해제를 의미합니다.
예를 들어 -

import { nanoid } from 'nanoid'

const Home = () => {
    const itemList = ['hello world', 'second line', 'third line']
    return (
        <ul>
            {itemList.map((item) => {
                return <li key={nanoid()}>{item}</li>
            })}
        </ul>
    )
}

구성 요소 트리 아래로 키를 전달할 필요가 없습니다.

// incorrect usage
const Item = (item) => {
    return (
        <li key={item.id}>{item.value}</li>
    )
}

// correct usage
const Item = (item) => {
    return (
        <li>{item.value}</li>
    )
}

const Home = () => {
    const itemList = [{id: '#1',value: 'hello world'}, {id: '#2',value: 'second line'}, {id: '#3',value: 'third line'}]
    return (
        <ul>
            {itemList.map((item) => {
                return <Item key={item.id} item={item}/>
            })}
        </ul>
    )
}

배열에서 인덱스를 사용하는 것은 최후의 수단이어야 하며 내부적으로 React는 제공되지 않은 경우 indes를 키로 사용합니다.