[TIL] 리액트 컴포넌트의 key

리액트 컴포넌트에서의 Key

📌 Key란?

리액트에서 key는 리액트가 어떤 항목을 변경, 추가, 삭제할지 식별(어떤 컴포넌트인지)하는 것을 돕는다.


key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.(배열 내부! / 배열이 아닌 항목에 대해서는 지정할 필요가 없다)


key는 리스트의 다른 항목들 사이 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 좋으며 인덱스를 사용하는 것은 권장하지 않는다.

const manList = [
        { id: 1, name: 'gil-dong' },
        { id: 2, name: 'gang-dong' },
        { id: 3, name: 'steve' },
        { id: 4, name: 'start' },
        { id: 5, name: 'hang-ju' },
        { id: 6, name: 'paul' },
    ]

const components = manList.map(v =>
        <li key={v.id}>{v.name}</li>
);

📌 Key는 주변 항목에서만 고유한 값이면 된다.

key는 배열 안에서 만들어지는 항목 사이에만 고유하면 되고 전체 범위에서 고유할 필요는 없다.

const Test = () => {

    const manList = [
        { id: 1, name: 'gil-dong' },
        { id: 2, name: 'gang-dong' },
        { id: 3, name: 'steve' },
        { id: 4, name: 'start' },
        { id: 5, name: 'hang-ju' },
        { id: 6, name: 'paul' },
    ]

    const firstComponents = manList.map(v =>
        <li key={v.id}>{v.name}</li>
    );

    const secondComponents = manList.map(v =>
        <li key={v.id}>{v.name}</li>
    );
    return (
        <div>
            {firstComponents}
            <hr />
            {secondComponents}
        </div>
    );
};

📌 Key의 전달과 JSX에 map()을 사용하기

리액트에서 key는 prop에 넣더라도 컴포넌트에 전달되지 않는다.

jsx를 사용하면 중괄호 안에 표현식을 포함 시킬 수 있으므로 변수를 만들지 않아도 인라인으로 처리할 수 있다.

const Test = () => {

    const manList = [
        { id: 1, name: 'gil-dong' },
        { id: 2, name: 'gang-dong' },
        { id: 3, name: 'steve' },
        { id: 4, name: 'start' },
        { id: 5, name: 'hang-ju' },
        { id: 6, name: 'paul' },
    ]
    return (
        <div>
            {manList.map(v =>
                <Li key={v.id} name={v.name} />
            )}
        </div>
    );
};

const Li = ({ name,key }) => {
// props key를 넣으면 오류가 난다.
//Warning: Each child in a list should have a unique "key" prop.
    return (
        <div>
            <li>{name}</li>
        </div>
    );
};

key값이 필요하면 다른 이름의 prop으로 명시적으로 전달

 {manList.map(v =>
                <Li key={v.id} name={v.name}
                id={v.id}  list={v}
                // key 값 자체를 보내거나 객체 자체를 보내 사용
                 />
            )}

하위 컴포넌트에서 prop key가 아닌 다른 prop 값으로 key값 받기

 const Li = ({ name, id, list }) => {
    return (
        <div>
            <li>{name}</li>
        </div>
    );
};

출처 : https://ko.reactjs.org/docs/lists-and-keys.html
https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318