[ReactJS] List and Keys

List

리액트에서는 배열을 사용하여 list 형태로 element들을 렌더링 할 수 있다.

Keys

열쇠는 모두 다 모양이 다른 고유한 성질을 지닌다. 그래서 프로그래밍에서의 key는 각 객체나 아이템을 구분할 수 있는 고유한 값을 의미하고, 리액트에서는 아이템들을 구분하기 위한 고유한 문자열을 의미한다.

여러 개의 Component 렌더링 하기 : map()

mapping은 한 쪽에 있는 아이템과 다른 쪽에 있는 아이템을 짝 지어주는 역할을 한다.

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

number 배열의 처음부터 끝가지 2배 연산을 수행한 뒤 반환해준다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ul>{listItems}</ul>
  </React.StrictMode>
);

각 숫자를 li 태그로 감싸 리턴해주는데, 그렇게 listItems 배열에는 5개의 element들이 들어가게 되고, 최종 결과는 숫자 다섯개가 글머리 기호와 함께 출력된다.

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]
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <NumberList numbers = {numbers} />
    </React.StrictMode>
)

이 코드는 warning이 뜨는데, 이유는 key가 없어서이다.

Keys의 고유성

같은 List에 있는 Element들 사이에서만 고유하면 된다. 다른 List라면 key 값이 겹쳐도 상관 없다. key 값을 number.toString() 같이 값으로 사용하는 경우 중복의 위험이 있고, id를 사용하는 경우 무조건 고유한 값이기 때문에 중복의 위험이 없다. index를 키 값으로 사용할수도 있는데, 이는 배열의 순서가 바뀔 수 있는 경우 성능에 부정적인 영향을 미칠 수 있기 때문에 권장하지 않는다. 리액트에서 key 값을 명시적으로 넣어주지 않으면 기본적으로 index 값을 key로 활용한다.

---

< Source />

AttendanceBook.jsx

import React from "react";

const students = [
    {
        id: 1,
        name: "cdd",
    },
    {   id: 2,
        name: "ion",
    },
    {   id: 3,
        name: "neo vincent"
    },
    {   id: 4,
        name: "yoon"
    },
]

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

export default AttendanceBook;

※ 본 게시글은 소플님의 강의 영상을 참고하여 작성되었습니다. 개인적인 공부 목적으로 사용하고 있고, 문제 시 비공개 전환하도록 하겠습니다.