리액트 핵심만 훑어보자 #11 리스트와 키

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.

 

리스트와 키

• 리스트는 같은 유형의 아이템을 순서대로 모아놓은 것이다.
• 리스트를 구현하기 위해 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것을 배열이라고 한다.
• 키는 각 객체나 아이템을 구분할 수 있는 고유한 값을 의미한다.

 

Map()

• 같은 컴포넌트를 재사용할 때 각 컴포넌트의 내용을 코드상에 하나씩 직접 넣는 것은 비효율적이다.
• 대신 자바스크립트 배열의 map() 함수를 사용하면 된다.
• map() 함수는 배열에 들어있는 각 변수 또는 객체에 어떤 처리를 한 뒤 배열을 리턴한다. 다음은 예제 코드이다.

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

• 상기 코드를 실행하면 리스트 아이템에는 무조건 키가 있어야 한다는 경고 문구가 나온다. 코드를 개선해보자.

// 1. id 사용
const listItems = numbers.map((number) => 
    <li key={number.id}>{number}</li>
);
    
// 2. map()의 index 사용    
const listItems = numbers.map((number, index) => 
    <li key={index}>{number}</li>
);

• 리액트에서는 키를 넣어주지 않으면 기본적으로 인덱스 값을 키로 사용한다. 그렇기 때문에 경고 문구를 노출해주는 것.
• 인덱스를 키로 사용하면 아이템의 순서가 바뀔 경우 성능에 영향을 미치고 컴포넌트의 상태 관련 문제를 일으킬 수도 있다.
• 그렇기 때문에 각 요소의 식별 가능한 ID를 키로 사용하는 것이 올바르다.
• 다시 한번 꼭 기억해야할 부분은 map() 함수를 사용할 땐 엘리먼트에 키값을 넣어주어야 한다는 점이다.

 

실습

// ... 

  return (
          // ...
          <TableBody>
            {currentPageData.map((member) => (
              <TableRow key={member.email} sx={{ height: "30px" }}>
                <TableCell sx={{ paddingBottom: "5px", paddingTop: "5px" }}>
                  {member.leader === member.email ? "👑 " : ""}
                  {member.name}
                </TableCell>
                <TableCell sx={{ paddingBottom: "5px", paddingTop: "5px" }}>
                  {member.email}
                </TableCell>
                <TableCell sx={{ paddingBottom: "5px", paddingTop: "5px" }}>
                  {member.description}
                </TableCell>
                <TableCell sx={{ paddingBottom: "5px", paddingTop: "5px" }}>
                  <IconButton
                    color="inherit"
                    onClick={(event) => handleMenuOpen(event, member)}
                  >
                    <MoreVertIcon />
                  </IconButton>
                  {/* 드롭다운 메뉴 */}
                  <Menu
                    anchorEl={anchorEl}
                    open={selectedRow === member}
                    onClose={handleMenuClose}
                    anchorOrigin={{
                      vertical: "top",
                      horizontal: "right",
                    }}
                    transformOrigin={{
                      vertical: "top",
                      horizontal: "right",
                    }}
                  >
                    <MenuItem onClick={() => updateWorkspace(member)}>
                      리더 지정
                    </MenuItem>
                    <MenuItem onClick={() => removeMemberFromWorkspace(member)}>
                      추방
                    </MenuItem>
                  </Menu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
          // ...
  );
};

// ...

• 참고로 책에서 제공하는 실습 코드가 아니라 작성자의 토이 프로젝트에서 가져온 코드 일부분이다.
• 성능 문제를 방지하기 위해 키를 인덱스가 아닌 각 멤버의 이메일로 두었다.

 

이미지 출처

[React] Component 를 사용하는 기본적인 방법

소플 - soaple.io