React
React에서 키를 사용하는 방법 및 이유

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript

소개

React 구성 요소 목록을 렌더링 할 때마다 각 구성 요소에는 key 특성이 있어야합니다. 키는 값이 될 수 있지만 그 목록에 고유해야합니다.

React가 항목 목록에서 변경 사항을 렌더링해야하는 경우 React는 동시에 두 어린이 목록을 반복하고 차이가있을 때마다 변형을 생성합니다. 자식에 대해 설정된 키가 없으면 React는 각 자식을 검사합니다. 그렇지 않으면 React가 키를 비교하여 목록에 추가되거나 제거 된 키를 확인합니다.

비고

자세한 내용은 다음 링크를 방문하여 키 사용 방법을 참조하십시오 . https://facebook.github.io/react/docs/lists-and-keys.html

이 링크를 방문하여 키 사용 권장 이유를 읽어보십시오. https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children

기본 예제

클래스가없는 React 구성 요소의 경우 :

function SomeComponent(props){

    const ITEMS = ['cat', 'dog', 'rat']
    function getItemsList(){
        return ITEMS.map(item => <li key={item}>{item}</i>);
    }
    
    return (
        <ul>
            {getItemsList()}
        </ul>
    );
}

이 예제의 경우 위의 구성 요소는 다음을 해결합니다.

<ul>
    <li key='cat'>cat</li>
    <li key='dog'>dog</li>
    <li key='rat'>rat</li>
<ul>

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow