๐ 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.