[처음 만난 리액트] 섹션 10. List and Keys

List와 Key

List

• 목록
• Array (배열) : 자바스크립트의 변수나 객체들을 하나의 변수로 묶어 놓은 것.

 

Key

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

 

여러개의 Component 렌더링 하기

map()

• 짝 지어주는 것 

  ReactDOM.render(
      <ul>
          <li>{1}</li>
          <li>{2}</li>
          <li>{3}</li>
          <li>{4}</li>
          <li>{5}</li>
      </ul>
      document.getElementById('root')
  )

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

 

기본적인 List Component

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')
)

// 각 아이템에 키가 없기 때문에 콘솔에 경고 문구가 출력됨.

 

Liset의 Key

• Key의 값은 같은 List에 있는 Elemnets 사이에서만 고유한 값이면 된다.
• 두 대학교 사이에서는 학번이 같아도 상관 없듯이 두 list 사이에서는 key가 같아도 상관 없다.
• map() 함수 안에 있는 Elements는 꼭 key가 필요하다.

 

key로 값을 사용하는 경우

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

 

key로 id를 사용하는 경우

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

 

key로 index를 사용하는 경우

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

 

(실습) 출석부 출력하기

// Attendance.jsx

import React from "react"

const students = [
    {
        id: 1,
        name: "WJ",
    },
    {
        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.id}`}>{student.name}</li>
                // key를 포맷팅 된 문자열로 변경
            })}

            {students.map((student, index) => {
                return <li key={index}>{student.name}</li>
                // key를 index로 변경
            })}

        </ul>
    )
}

export default AttendanceBook