앞에서 키가 갖고 있는 특징은 고유하다는 것이라고 했습니다. 마찬가지로 리액트에서의 키는 리스트에서 아이템들을 구분하기 위한 고유한 문자열이라고 이해하면 됩니다. 키는 리스트에서 어떤 아이템이 변경, 추가, 또는 제거되었는지 구분하기 위해서 사용합니다.

우리가 일상생활에서 사용하는 키로는 주민등록번호, 학번, 핸드폰 번호, 여권번호 등이 있습니다. 모두 다 고유한 값이라는 특징을 갖고 있죠. 하지만 고유하다는 특징은 그 범위가 한정되어 있습니다. 리액트에서는 키의 값은 같은 리스트에 있는 element들 사이에서만 고유한 값이면 됩니다. 아래 그림을 한 번 보도록 하겠습니다.

위 그림은 A대학교와 B대학교 학생들의 학번을 나타낸 것입니다. 자세히 보면 각 대학교 학생들의 학번이 겹치는 것을 볼 수 있습니다. 하지만 A대학교 학생들의 학번은 모두 다르고, B대학교 학생들의 학번도 모두 다릅니다. 이처럼 학번은 대학교 내에서 학생들을 구분하기 위한 일종의 키이기 때문에, 속한 집합 내에서만 고유한 값이면 됩니다. 그렇다면 실제 리액트에서는 어떻게 적용될까요?

위 그림은 NumberList를 나타낸 것입니다. 각 리스트의 아이템에는 키가 들어있습니다. 위에 나왔던 대학교 학번 예시와 마찬가지로 두 개의 NumberList간에 아이템들의 키값이 중복되는 것을 볼 수 있습니다. 하지만 이 역시 각 리스트 내에서 아이템들을 구분하기 위한 용도이기 때문에, 속한 리스트 내에서만 고유한 값이면 됩니다.

그렇다면 실제로 고유한 키값을 어떻게 만들어서 사용해야 하는지 알아보도록 하겠습니다. 먼저 아래 코드는 키값으로 숫자의 값을 사용한 것입니다. 이렇게 하면 지금처럼 numbers배열의 숫자들이 중복되지 않는 경우에는 정상적으로 작동하지만, 만약 numbers배열에 중복된 숫자가 들어가 있으면 키 값도 중복되기 때문에 고유해야 한다는 키 값의 조건이 충족되지 않습니다. 그리고 이러한 경우에 실행을 해보면 키 값이 중복된다는 경고 메시지가 출력되는 것을 볼 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
    <li key={number.toString()}>
        {number}
    </li>
);

다음으로는 키 값으로 id를 사용하는 방식이 있습니다. id의 의미 자체가 고유한 값이라는 것이기 때문에 키 값으로 사용하기에 적합합니다. 이렇게 id가 있는 경우에는 보통 이 id값을 키 값으로 사용하게 됩니다.

const todoItems = todos.map((todo) =>
    <li key={todo.id}>
        {todo.text}
    </li>
);

그리고 마지막으로 키 값으로 index를 사용하는 방법이 있습니다. 이 방법은 map()함수에서 두 번째 파라미터로 제공해주는 index값을 키 값으로 사용하는 것입니다. 이 index는 배열 내에서 현재 아이템의 index를 의미합니다. index값도 고유한 값이기 때문에 키 값으로 사용해도 됩니다. 하지만 배열에서 아이템의 순서가 바뀔 수 있는 경우에는 키 값으로 index를 사용하는 것을 추천하지 않습니다. 성능에 부정적인 영향을 끼칠 수 있고, 컴포넌트의 state와 관련하여 문제를 일으킬 수도 있기 때문입니다. 그래서 index를 키 값으로 사용하는 것은 아이템들에 고유한 id가 없을 경우에만 사용하는 것이 좋습니다. 참고로 리액트에서는 키를 명시적으로 넣어주지 않으면 기본적으로 이 index값을 키 값으로 사용합니다.

const todoItems = todos.map((todo, index) =>
    // 아이템들에 고유한 ID가 없을 경우에만 사용해야 함
    <li key={index}>
        {todo.text}
    </li>
);

지금까지 다양한 키 값의 사용법에 대해서 알아보았습니다. 여기서 꼭 기억해야 할 점은 map()함수 안에 있는 element는 꼭 키가 필요하다는 점입니다. 리액트 개발을 처음 하는 분들이 가장 많이 하는 실수가 바로 map()함수를 사용하면서 element에 키 값을 넣지 않는 것입니다. 그렇기 때문에 이 부분을 잘 기억하고 넘어가기 바랍니다.