10.List, key

-List?

같은 아이템을 순서대로 모아놓은 것. = 배열

const list = [1,2,3];

 

-key?

각 객체나 아이템을 구분할 수 있는 고유 값. 고유 문자열

 

-여러개의 컴포넌트 렌더링 하기 = map()

const doubled = numbers.map((number) => number * 2);

 

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

ReactDOM.render(
	<ul>{listItemas}</ul>
    document.getElementById('root');
);

예시 -  map 함수를 통해서 배열에 들어가 있는 각 숫자를 li태그로 감싸 리턴하고 있다.

 

-기본적인 list 컴포넌트

function NumberList(props){
	const {numbers} = props;
    
    const listItems = numbers.map((number) =>
    	<li>{number}</li>
    );
    
    return(
    	<ul>{listItems}</ul>
    );
}

const numbers = [1,2,3,4,5];
ReactDOM.render(
	<NumberList number={numbers} />
    document.getElementById('root')
);

예시

 

그런데 이대로 실행하면 콘솔에 경고 문구가 뜬다. key값이 없다는 경고이므로 key값을 부여해야한다.

 

-list의 key

아이템이 변경,추가,제거되었는지 구분하기 위해 사용.같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 된다.

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

예시 - 키 값으로 숫자의 값을 사용한 경. 중복된 숫자가 있다면 키값이 중복되기 때문에 안됨.

 

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

예시 - 키 값으로 id를 부여한 경우.

 

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

예시 - 키 값으로 index(배열 내에서의 현재 아이템의 index)를 사용한 경우. 고유한 id가 없을 경우에 사용. 순서가 바뀔 수 있을 경우 권장하지 않음.

 

리액트에서는 키 값을 명시적으로 넣어주지 않으면 기본적으로 배열 내에서의 현재 아이템의 index값을 키 값으로 사용한다.

 

>>맵 함수 안에 있는 엘리먼트는 꼭 키 값을 넣어야 한다<<

 

-실습

import React from "react";

const students = [
    {name : "Hey"},
    {name : "samuel"},
    {name : "Mike"},
    {name : "Bill"},
];

function AttendanceBook(props){
    return(
        <ul>
            {students.map((student) => {
                return <li>{student.name}</li>
            })}
        </ul>
    );
}

export default AttendanceBook;

AttendanceBook.jsx

 

(index.js 생략)

key값을 부여하지 않고 렌더링 했기 때문에 콘솔창을 보면 오류가 떠 있다.

배열에 키 값을 추가하고 이를 li 태그에 부여해주자.

 

import React from "react";

const students = [
    {id : 1, name : "Hey"},
    {id : 2, name : "samuel"},
    {id : 3, name : "Mike"},
    {id : 4, name : "Bill"},
];

function AttendanceBook(props){
    return(
        <ul>
            {students.map((student) => {
                return <li key={student.id}>{student.name}</li>
            })}
        </ul>
    );
}

export default AttendanceBook;

AttendanceBook.jsx

 

키 방식은 여러방법이 있다.

//포맷팅 된 문자열로 변경
{students.map((student) => {
	return <li key={`student-id-${student.id}`}>{student.name}</li>
})}


//index를 키 값으로 설정
{students.map((student,index) => {
	return <li key={index}>{student.name}</li>
})}