5-3. map함수에서 key란?

송한솔·2023년 4월 27일

목록 보기

26/54

key를 사용하는 이유

1.

const names = ['A', 'B', 'C'];
const nameList = names.map(item => <li>{item}</li>)

네, 인라인 스타일에서 style 속성의 값은 따옴표(")로 감싸줘야 합니다. 따라서 오류가 있는 문법입니다. 올바른 문법은 다음과 같습니다.

여기서 map함수로 생성한 컴포넌트를 렌더링 한다면

2.

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

3.

const names = ['A', 'B', 'C', 'D'];

그러나 외부요소로 인해 names의 배열이 추가되었을때

4.

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

react는 names의 모든 부분을 다시 렌더링합니다.

이런 비효율적인 업데이트 과정을 없애고자 key가 필요합니다.

5.

const nameList = names.map(item => <li key={item}>{item}</li>);

이런식으로 key를 설정해 준다면

6.

<ul>
  <li key="A">A</li>
  <li key="B">B</li>
  <li key="C">C</li>
  <li key="D">D</li> <!-- 새로 추가된 항목만 업데이트됨 -->
</ul>

react에서 key를 지표삼아 새로 추가된 요소만 식별하여 업데이트 할 수 있게 됩니다.

5-2. IterationSample.js에 key값 추가하기

IterationSample.js

// IterationSample.js
import React from 'react';

const IterationSample = () => {
// li에 들어가 있던 내용을 배열로 생성    
    const names = ['눈사람', '얼음', '눈', '바람'];
// map함수 사용
    const nameList = names.map(item => <li>{item}</li>)
    return (
        <ul>
            {nameList}
        </ul>
    );
};

export default IterationSample;

먼저 5-2에서 지금까지의 과정을 브라우저에서 실행하셨다면

콘솔에 확인했을때 오류창을 볼 수 있습니다.

이 경고는 리액트에서 각 배열이 고유한 key를 가져야한다고 말합니다.

key란 react에서 컴포넌트 배열을 렌더링 했을 때,
어떤 원소에 변동이 있었는지 알아내려고 사용합니다.

⇒ 상단에 key를 사용하는 이유 참조

컴포넌트를 다음과 같이 수정해봅시다.

//IterationSample.js
import React from 'react';

const IterationSample = () => {

    const names = ['눈사람', '얼음', '눈', '바람'];
// map함수 사용
    const nameList = names.map((item,index) => <li key={index}>{item}</li>)

    return (
        <ul>
            {nameList}
        </ul>
    );
};

export default IterationSample;