[소플] ch 10. 리스트와 키

1. 리스트와 키 

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

 

배열(Array)

- 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것

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

 

키(Key)

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

 

 

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

 

map() 함수 

 

- 배열에 들어 있는 각 변수에 어떤 처리를 한 뒤 리턴 

- 배열의 첫 번째 아이템부터 순서대로 각 아이템에 어떤 연산을 수행한 뒤에 최종 결과를 배열로 만들어서 리턴 

 

ex)

- map() 함수를 사용하여 numbers 배열에 들어있는 각 숫자에 2를 곱한 값이 들어간 doubled라는 배열을 생성

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

 

- 숫자 목록을 출력하는 NumberList 컴포넌트 

 - prop로 숫자가 들어있는 배열인 numbers를 받아서 이를 목록으로 출력 

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 numbers={numbers} />,
        document.getElementById('root')
);

 

 

3. 리스트의 키에 대해 알아보기 

 

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

- 키는 리스트에서 어떤 아이템이 변경, 추가 또는 제거되었는지를 구분하기 위해 사용 

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

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

 

1) 키 값으로 id를 사용 

 

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

 

2) 키 값으로 인덱스(index)를 사용 

 

- map() 함수에서 두 번째 파라미터로 제공해 주는 인덱스 값을 키값으로 사용

- 인덱스는 배열 내에서 현재 아이템의 인덱스를 의미 

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

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

 

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

 

 

4. 실습  -  출석부 출력하기 

 

- 리스트와 키를 사용해서 출석부 컴포넌트 만들기 

 

AttendanceBook.jsx

 

- stdents 배열로부터 학생 정보가 담긴 객체를 받아 학생들의 이름을 목록 형태로 출력 

- 배열을 렌더링하기 위해 map() 함수를 사용

import React from "react";

const students = [
    {
        id: 1,
        name: "Inje",
    },
    {
        id:2,
        name:"Steve",
    },
    {
        id:3,
        name:"Bill",
    },
    {
        id:4,
        name:"Jeff",
    },
];

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

export default AttendanceBook;