๐ซ ์ด๋ ค์ด ๋ฆฌ์กํธ. ๋ง ๋๋ ค๋ฃ์ผ๋ฉด ์ธ์ ๊ฐ ๊นจ๋ซ๋ ๋ ์ด ์ค๊ฒ ์ง
๋ชฉํ
๋ฆฌ์คํธ์ key๊ฐ, ๊ทธ๋ฆฌ๊ณ map ํจ์๋ฅผ ์ด์ฉํ ๋ฐ๋ณต๋ฌธ ์ฌ์ฉํด๋ณด๊ธฐ.
์ ๋ ์ค์ฉ์ฑ ์๋ To do List๋ฅผ ๋ง๋๋ ๊ฒ์ด ๋ชฉํ์ ๋๋ค.
html๋ก ๋ฆฌ์คํธ๋ง ์ถ๋ ฅํ๋๊ฒ์ ๊ต์ฅํ ๊ฐ๋จํ์ง๋ง,
๋์ค์ ํ ์ผ์ ์ถ๊ฐ, ์์ , ์ญ์ ํ ์ ์๋ ๊ธฐ๋ฅ์ ๋ง๋๋๊ฑด ๊ต์ฅํ ์ด๋ ต์ต๋๋ค.
input ๊ฐ์ ๋ฐ์ ๋ชฉ๋ก์ ๋ฐฐ์ด์ ์ถ๊ฐํด์ผํ๋๋ฐ, ์ด ๋ ํ์ํ ๊ธฐ๋ฅ์ด key ์ ๋๋ค.
์๋ ์ ๋ ๊ฐ์ ๊ตฌํ๊ธฐ ์ํด JavaScript ๋ฅผ ์ด์ฉํ ๋ index ๊ฐ์ ์ฌ์ฉํ์ผ๋,
๊ฐ๋ฐ์ ๋ง๋ก๋ '์ฑ๋ฅ์ด ์ ํ๋๊ณ state์ ์ํฅ์ ์ค ์ ์๊ธฐ ๋๋ฌธ์ ๋ฆฌ์กํธ์์๋ ๊ถ์ฅํ์ง ์๋๋ค'๊ณ ํฉ๋๋ค.
https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318
key๋ฅผ ์ง์ ํ์ง ์์์ ๊ฒฝ์ฐ์ react๋ ์๋์ผ๋ก index๋ฅผ key๋ก ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค.
ํญ๋ชฉ์ ์์๊ฐ ๋ฐ๋์ง ์์ ๊ฒฝ์ฐ์ index๋ ๊ฐ๋ฅํฉ๋๋ค.
๋ฆฌ์คํธ ๊ตฌ์ฑํ๊ธฐ
์์ ๊ธฐ๋ณธ์ ์ธ html ๊ตฌ์กฐ์์ key ๊ฐ์ ์ง์ ํ๊ธฐ ์ํ ์์ ์ ํด ๋ณผ ๊ฒ์ ๋๋ค.
TodoList.js ์ปดํฌ๋ํธ๋ฅผ ์๋ก ๋ง๋ค๊ณ ๊ฐ๋จํ html ์ฝ๋๋ฅผ ์์ฑํด ์ฃผ์์ต๋๋ค.
//todoList.js
import React from 'react'
function TodoList(){
return(
<div>
<ul>
<li>๋นจ๋ํ๊ธฐ</li> //index=0
<li>์ฒญ์๊ธฐ ํํฐ ๋ถํดํ๊ธฐ</li> //index=1
</ul>
</div>
)
}
export default TodoList;
์ด๋ ๊ฒ ๋๋ฉด ํ์ฌ ์ ๊ฐ ๋ฐ๋ก li ๊ฐ์ key ๊ฐ์ ๋ถ์ฌํ์ง ์์์ผ๋ index๊ฐ์ธ
๋นจ๋ํ๊ธฐ๋ 0, ์ฒญ์๊ธฐ ํํฐ๋ 1 ์ key๊ฐ์ผ๋ก ๊ฐ์ง๊ฒ ๋ฉ๋๋ค.
์ด๋ ๊ฒ ์จ๋ ๋ฌธ์ ๊ฐ ์์ง๋ง todoList ๊ธฐ๋ฅ ํน์ฑ์ ๋ฐฐ์ด์ ์ถ๊ฐ,์ ๊ฑฐ,์์ ์ ๋ฐ๋ณตํด์ผ ํ๊ธฐ ๋๋ฌธ์
์ ๋ ์ฌ๊ธฐ์ key ๊ฐ์ ๋ถ์ฌํ๊ธฐ์ํด ์ฝ๋๋ฅผ ๋ณ๊ฒฝํ์ต๋๋ค.
์ฝ๋ ๋ณ๊ฒฝํ๊ธฐ
//todoList.js
import React from 'react'
function TodoList(){
const todos = [
{id:'a', content:'๋นจ๋ํ๊ธฐ'},
{id:'b', content:'์ฒญ์๊ธฐ ํํฐ ๋ถํดํ๊ธฐ'},
]
return(
<div>
<ul>
</ul>
</div>
)
}
export default TodoList;
li์ ์๋ ๊ฐ์ const๋ก ๋ณ์์ ์ธ์ ํ๊ณ ๋ฐฐ์ด์ ์ง์ ์ ์ผ๋ก ๋ฃ์ด๋์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ map ํจ์๋ฅผ ์ฌ์ฉํ์ฌ JSX ๋ฐฉ์์ผ๋ก ์ถ๋ ฅํด ๋ณผ ๊ฒ์ ๋๋ค.
map()
๋ฐ๋ณต๋๋ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๊ธฐ ์ํ ํจ์.
ํ๋ผ๋ฏธํฐ๋ก ์ ๋ฌ๋ ํจ์๋ฅผ ์ ์ธํ ๊ท์น์ ๋ฐ๋ผ ์๋ก ๋ฐฐ์ด์ ์์ฑ.
๋ฌธ๋ฒ : arr.map(callbackFunction, [thisArg])
//todoList.js
import React from 'react'
function TodoList(){
const todos = [
{id:'a', content:'๋นจ๋ํ๊ธฐ'},
{id:'b', content:'์ฒญ์๊ธฐ ํํฐ ๋ถํดํ๊ธฐ'},
]
const todoLista = todos.map((todo)=><li key={todo.id}>{todo.id}, {todo.content}</li>)
return(
<div>
<ul>
{todoLista}
</ul>
</div>
)
}
export default TodoList;
๋ฐฐ์ด์ ์๋๋๋ก ํค๊ฐ์ id, ๋ด์ฉ์ content ๊ฐ์ ๋ถ์ฌํ์ฌ ๋ ๋๋ง ํ๋ฉด ์๋์ฒ๋ผ ๋์ต๋๋ค.
'React > basic' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] ํ์ดํํจ์์ this์ ๊ด๊ณ (1) | 2023.03.01 |
---|---|
[React] var ๋์ let์ ์ฌ์ฉํ์! (0) | 2023.03.01 |
[React] React ๋ ์ className ์ ์ฌ์ฉํ ๊น? (0) | 2023.02.25 |
[React] props๋ฅผ ํ์ฉํ์ฌ ์กฐ๊ฑด๋ฌธ ๋ง๋ค์ด๋ณด๊ธฐ (0) | 2023.01.20 |
[React] Props ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ ์ฃผ๊ณ ๋ฐ๊ธฐ (0) | 2023.01.19 |