[React] 리스트(List)와 키(Key)

 

 

1. 개념

 

1) 리스트(List)

- 같은 아이템을 순서대로 모아놓은 것

- 리스트를 위해 사용하는 도구인 자료구조는 배열(Array), 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것

const numbers = [1, 2, 3, 4, 5];

 

 

2) 키(Key)

- 각 객체나 아이템을 구분할 수 있는 고유한 값

 

리액트에서는 배열과 키를 사용하여 반복되는 다수의 엘리먼트를 쉽게 렌더링할 수 있음

 

 

2. 여러개의 컴포넌트 렌더링하기

- 자바 스크립트 배열의 map() 함수 사용

- 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 결과(엘리먼트)를 배열로 만들어서 리턴하는 것

- map()함수 안에 있는 엘리먼트는 꼭 키가 필요함

 

mport React from 'react';

function NumberList(props) {
    const {number} = props;

    const listItems = numbers.map((number) =>
    <li>{number}</li>
    );

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

const numbers = [1, 2, 3, 4, 5];



export default NumberList;

 

 

3. 키(key)

- 리스트의 아이템을 구분하기 위한 고유 문자열

- 아이템의 변경, 추가, 제거를 구분하기 위해 사용

- 리액트에서 키의 값은 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 됨

- map()함수 사용 시 엘리먼트에 키 값을 넣는 것은 필수

 

 

4. 다양한 방식의 키 값

 

1) 숫자 값 사용

- 배열에 중복된 숫자가 들어있으면 키 값도 중복되기 때문에 고유해야 한다는 키 값의 조건이 충족되지 않음

- 키 값으로 사용하기 적합하지 않은 방식

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

 

 

2) 포맷된 된 문자열 사용

function AttendanceBook(props) {
    return (
        <ul>
            {/* 배열을 렌더링 하기 위해 map()함수 사용 */}
            {/* 포맷팅 된 문자열을 키 값으로 사용 */}
            {Students.map((student, index) => {
                return <li key={`student-id-${student.id}`}>{student.name}</li>
            })}
        </ul>
    );
}

 

 

3) id 사용

- id 의미 자체가 고유한 값이므로 키값으로 사용하기 적합

- id가 있는 경우 보통 id를 키 값으로 사용

function AttendanceBook(props) {
    return (
        <ul>
            {/* 배열을 렌더링 하기 위해 map()함수 사용 */}
            {/* id를 키 값으로 사용 */}
            {Students.map((student) => {
                return <li key={student.id}>{student.name}</li>
            })}
        </ul>
    );
}

 

 

4) 인덱스 사용

- 배열에서 아이템의 순서가 바뀔 수 있는 경우, 인덱스 사용을 권장하지 않음

- 리액트에서는 키를 명시적으로 넣어주지 않으면 기본적으로 인덱스 값을 키 값으로 사용

function AttendanceBook(props) {
    return (
        <ul>
            {/* 배열을 렌더링 하기 위해 map()함수 사용 */}
            {/* 인덱스를 키 값으로 사용 */}
            {Students.map((student, index) => {
                return <li key={index}>{student.name}</li>
            })}
        </ul>
    );
}