10강. List and Keys

List와 Key

List : 목록, Array(배열: JS의 변수나 객체들을 하나의 변수로 묶어놓은 것)

Key : 열쇠, 각 객체나 아이템을 구분할 수 있는 고유한 값, 아이템들을 구분하기위한 고유한 문자열

 

여러개의 Component렌더링하기

map() : 배열의 각 변수에 처리후 리턴하는 것

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

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

//렌더링된 코드
ReactDOM.render(
  <ul>
    <li>{1}</li>
    <li>{2}</li>
    <li>{3}</li>
    <li>{4}</li>
    <li>{5}</li>
  </ul>,
  document.getElementById('root')
);

 

기본적인 List Component

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

 

List의 Key

Key의 값은 같은 List에 있는 Elements사이에서만 고유한 값이면 된다.

//key로 값을 사용하는 경우 : 중복된 값이 있을 경우x
const numbers = [1, 2, 3, 3, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

//key로 id를 사용하는 경우 : 고유한 값이므로 o
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

//key로 index를 사용하는 경우 : 순서가 바뀔수 있으므로 권장x, 성능저하, component state오류
const todoItems = dotos.map((todo, index) =>
  //아이템들의 고유한 ID가 없을 경우에만 사용
  <li key={index}>
    {todo.text}
  </li>
);

 

map()함수 안에 있는 Elements는 꼭 key가 필요하다

 

(실습) 출석부 출력하기

//AttendanceBook.jsx
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>;

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

            
            {/*  key를 index로 변경 */}
            {students.map((student, index) => {
                return <li key={index}>{student.name}</li>;
            })}
        </ul>
    );
}
export default AttendanceBook;

//index.js
  <React.StrictMode>
    <AttendanceBook />
  </React.StrictMode>
)