Post

๐ŸŒŒ React ์ž…๋ฌธ โ…ช - List์™€ Key

๐ŸŒŒ React ์ž…๋ฌธ โ…ช - List์™€ Key

๐Ÿ“˜ ใ€Ž์†Œํ”Œ์˜ ์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธใ€๋ฅผ ์ฝ๊ณ  ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

List์™€ Key

  • List๋Š” ๊ฐ™์€ ์œ ํ˜•์˜ ์•„์ดํ…œ์„ ์ˆœ์„œ๋Œ€๋กœ ๋ชจ์•„ ๋†“์€ ๊ฒƒ์ด๋‹ค.
  • List๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด Javascript์˜ ๋ณ€์ˆ˜๋‚˜ ๊ฐ์ฒด๋ฅผ ํ•˜๋‚˜์˜ ๋ณ€์ˆ˜๋กœ ๋ฌถ์–ด ๋†“์€ ๊ฒƒ์„ย ๋ฐฐ์—ด์ด๋ผ๊ณ  ํ•œ๋‹ค.
  • Key๋Š” ๊ฐ ๊ฐ์ฒด๋‚˜ ์•„์ดํ…œ์„ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณ ์œ ํ•œ ๊ฐ’์„ ์˜๋ฏธํ•œ๋‹ค.

map()

1
2
3
4
5
6
7
8
9
10
11
function NumberList(props) {
    const { numbers } = props;
    
    const listItems = numbers.map((number) => 
        <li>{number}</li>
    );
    
    return (
    	<ul>{listItems}</ul>
    );
}
  • ์ƒ๊ธฐ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ฉดย List ์•„์ดํ…œ์—๋Š” ๋ฌด์กฐ๊ฑด Key๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒฝ๊ณ  ๋ฌธ๊ตฌ๊ฐ€ ๋‚˜์˜จ๋‹ค.
1
2
3
4
5
6
7
8
9
// id ์‚ฌ์šฉ
const listItems = numbers.map((number) => 
    <li key={number.id}>{number}</li>
);
    
// map()์˜ index ์‚ฌ์šฉ    
const listItems = numbers.map((number, index) => 
    <li key={index}>{number}</li>
);
  • React์—์„œ๋Š” Key๋ฅผ ๋„ฃ์–ด์ฃผ์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœย indexย ๊ฐ’์„ Key๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
  • index๋ฅผ Key๋กœ ์‚ฌ์šฉํ•˜๋ฉด ์•„์ดํ…œ์˜ ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€” ๊ฒฝ์šฐ ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๊ณ  Component์˜ย ์ƒํƒœย ๊ด€๋ จ ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚ฌ ์ˆ˜๋„ ์žˆ์œผ๋ฏ€๋กœ ๊ฐ ์š”์†Œ์˜ ์‹๋ณ„ ๊ฐ€๋Šฅํ•œ ID๋ฅผ Key๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์˜ฌ๋ฐ”๋ฅด๋‹ค.

์‹ค์Šต

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
return (
    <TableBody>
        {currentPageData.map((member) => (
            <TableRow key={member.email} sx=>
                <TableCell sx=>
                    {member.leader === member.email ? "๐Ÿ‘‘ " : ""}
                    {member.name}
                </TableCell>
                <TableCell sx=>
                    {member.email}
                </TableCell>
                <TableCell sx=>
                    {member.description}
                </TableCell>
                <TableCell sx=>
                    <IconButton
                        color="inherit"
                        onClick={(event) => handleMenuOpen(event, member)}
                    >
                        <MoreVertIcon />
                    </IconButton>
                    {/* ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด */}
                    <Menu
                        anchorEl={anchorEl}
                        open={selectedRow === member}
                        onClose={handleMenuClose}
                        anchorOrigin=
                        transformOrigin=
                    >
                        <MenuItem onClick={() => updateWorkspace(member)}>
                            ๋ฆฌ๋” ์ง€์ •
                        </MenuItem>
                        <MenuItem onClick={() => removeMemberFromWorkspace(member)}>
                            ์ถ”๋ฐฉ
                        </MenuItem>
                    </Menu>
                </TableCell>
            </TableRow>
        ))}
    </TableBody>
);
  • ์ฑ…์—์„œ ์ œ๊ณตํ•˜๋Š” ์‹ค์Šต ์ฝ”๋“œ๊ฐ€ ์•„๋‹ˆ๋ผ ํ•„์ž์˜ ํ† ์ด ํ”„๋กœ์ ํŠธ์—์„œ ๊ฐ€์ ธ์˜จ ์ฝ”๋“œ ์ผ๋ถ€๋ถ„์ด๋‹ค.
  • ์„ฑ๋Šฅ ๋ฌธ์ œ๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ํ‚ค๋ฅผ index๊ฐ€ ์•„๋‹Œ ๊ฐ ๋ฉค๋ฒ„์˜ ์ด๋ฉ”์ผ๋กœ ๋‘์—ˆ๋‹ค.

ํšŒ๊ณ 

  • map()ย ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋• Element์— Key ๊ฐ’์„ ๋„ฃ์–ด์ฃผ์–ด์•ผ ํ•œ๋‹ค๋Š” ์ ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.
This post is licensed under CC BY 4.0 by the author.