๋ฐ๋ณต๋ฌธ์ ์จ์ผํ ๋ ์ค๋ฌด์์๋ for๋ฌธ ๋์ map์ ์ฃผ๋ก ์ฌ์ฉํ๋ค.
map ์ฌ์ฉ ์์๋ฅผ ๋ณด์.
๋ฐฐ์ด์ map ๋๋ ค๋ณด์.
๊ฐ์ฒด๋ฅผ map ๋๋ ค๋ณด์.
๋ค์ ํด์ฆ๋ฅผ ํ์ด๋ณด์.
์ด๋ ๊ฒ ์์ฑํ๋ฉด ๋๋ค.
classmates.map((el)=>({name:el.name, age:el.age, school:"ํ ๋ผ์ด๋ฑํ๊ต"}))
์ฌ๊ธฐ์ ํ์ดํ ํจ์์ ๋ํด์ ๋ ์์๋ณด์.
ํ์ดํ ํจ์์ ๋ํด์ ๋ ์์๋ณด๊ธฐ ์ ์ return์ด ๋ฌด์์ด๊ณ ์ด๋ค ์ญํ ์ ํ๋์ง๋ฅผ ๋จผ์ ์์๋ณด๋๋ก ํ์.
๋๊ฐ์ ๊ฐ์ ๋ํด์ฃผ๋ add ํจ์๋ฅผ ๋ง๋ค์ด๋ณด์. (๋ณดํต ํจ์์ ์ด๋ฆ์ ๋์ฌ๋ก ์์ํ๊ณ ๋ณ์๋ช
์ ๋ช
์ฌ๋ก ์์ํ๋ค.)
์ด๋ ๊ฒ ์์๋ฅผ ์ง์ ํด์ ๋ฃ์ด์ฃผ๋ ๋ฐฉ๋ฒ ๋ง๊ณ ๊ทธ๋ ๊ทธ๋ ์ํ๋ ๊ฐ์ ๋ฃ์ด์ค ์ ์๋ ํจ์๋ฅผ ๋ง๋ค์ด๋ณด์.
์ด๋ ๊ฒ ๋ง๋ค ์ ์์ ๊ฒ์ด๋ค.
์ด ๋ ํจ์( add2 )๋ฅผ ์คํํ๋ฉด์ ๋ฃ์ด์ฃผ๋ ๊ฐ์ ์ธ์ arguments ๋ผ๊ณ ํ๊ณ args๋ผ๊ณ ๋ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ด ์ธ์๊ฐ ๋ค์ด๊ฐ๋ aaa, bbb๋ฅผ ๋งค๊ฐ๋ณ์ parameter ๋ผ๊ณ ํ๋ค.
๊ทธ๋ฆฌ๊ณ ๋ณดํต ํ๋์ ํจ์๋ ํ๋์ ๊ธฐ๋ฅ๋ง์ ํ๊ฒ ํ๋ค.
๋ง์ฝ์ add์ multi ๋ผ๋ ๋ํ๊ธฐ์ ๊ณฑํ๊ธฐ ํจ์๋ฅผ ๋ ๊ฐ ๊ตฌํํ๋๋ฐ ์ด ๋ ๋ํ๊ธฐ์ ๊ฐ๊ณผ ๊ณฑํ๊ธฐ์ ๊ฐ์ ํฉ์น๊ณ ์ถ๋ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น?
๋ํ๊ธฐ์ ๊ฒฐ๊ณผ๊ฐ๊ณผ ๊ณฑํ๊ธฐ์ ๊ฒฐ๊ณผ๊ฐ์ ์ ์ฅํ ์ ์๋ ๋ฌด์ธ๊ฐ๊ฐ ์์ด์ผ ๋ ๊ฒ์ด๋ค.
์ด ๋ ํ์ํ ๊ฒ์ด ๋ฐ๋ก return ์ด๋ค.
return์ ์ฌ์ฉํ๋ฉด ๊ฒฐ๊ณผ๊ฐ์ ๋ฐํํ๋ฉด์ ํจ์๋ฅผ ์ข
๋ฃ์ํฌ ์ ์๋ค.
์ด์ return์ ๋ฃ์ด ์ฝ๋๋ฅผ ๊ณ ์ณ๋ณด์.
์ด๋ ๊ฒ ๊ตฌํํ๊ณ result ๋ผ๋ ์์๋ฅผ ๋ง๋ค์ด์ ๊ฐ๊ฐ์ ๊ฒฐ๊ณผ๊ฐ์ ์ ์ฅํ๋ฉด ๋๋ค.
์ด ์ฝ๋๋ฅผ ํ์ดํ ํจ์๋ก ๊ณ ์ณ๋ณด์.
์ด ๋ ํ์ดํํจ์๋ ์ค๊ดํธ์ return ์ฌ์ด์ ์ด๋ ํ ๋ก์ง์ด ์๋ค๋ฉด ์ค๊ดํธ์ return์ ์๊ดํธ๋ก ๋ฐ๊ฟ ์ ์๋ค.
๊ทธ๋ฐ๋ฐ ์ฌ์ง์ด ์๊ดํธ๋ ๋นผ๋ ๊ด์ฐฎ๋ค๋ฉด ์๋ต์ด ๊ฐ๋ฅํ๋ค.
๊ทธ๋ ๋ค๋ฉด ๋ค์์ ์๊ดํธ๋ ์๋ต์ด ๊ฐ๋ฅํ ๊น?
์ด๊ฑด ๋ถ๊ฐ๋ฅํ๋ค.
์ฌ๊ธฐ์ ์๊ดํธ๋ฅผ ์๋ตํด๋ฒ๋ฆฌ๋ฉด ๊ฐ์ฒด์ ์ค๊ดํธ๊ฐ ์๋๋ผ ํจ์์ ์ค๊ดํธ๊ฐ ๋๊ธฐ ๋๋ฌธ์ด๋ค. ๊ทธ๋์ ๊ฐ์ undefined๊ฐ ๋์ค๊ฒ ๋๋ค.
ํ์ดํ ํจ์์์ ์๊ดํธ๋ฅผ ์๋ตํ ์ ์๋์ง๋ฅผ ์ ์์๋ณด๊ณ ์๋ตํ์ง ์์ผ๋ฉด ์๋ฌ๊ฐ ๋ ์ ์์ผ๋ฏ๋ก ์ ์ํ์!
์ด FRUITS ๋ผ๋ ๋ฐฐ์ด์ ์ด๋ ๊ฒ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ณ ์ถ๋ค๋ฉด ์ด๋ป๊ฒ ํ๋ฉด ๋ ๊น?
์๋์ฒ๋ผ JSX ๋ถ๋ถ์ ์ง์ map ๋๋ ค์ ์์ฑํ๋ฉด ๋๋ค.
์ด ๋ ์์ ๊ฐ์ด ํ๋์ฝ๋ฉ ๋๊ฑฐ๋ ๋ฐฑ์๋๋ก๋ถํฐ ๋ฐ์ ๋ฐ์ดํฐ ๋ถ๋ถ์ ์ฃผ๋ก ๋๋ฌธ์๋ก ์์ฑํ๊ณ ๋ณ๊ฒฝ์ด ์๊ธฐ ๋๋ฌธ์ ๋ฐ์ผ๋ก ๋นผ๋๊ฑฐ๋ ๋ค๋ฅธ ํ์ผ๋ก ๋นผ๋๋ค. ๊ทธ๋ฌ๋ฉด ๋ฆฌ๋ ๋๋ง ๋ผ๋ ์๋ก ๊ทธ๋ ค์ง์ง ์์ ๊ฒ์ด๋ค.
state๊ฐ ๋ฐ๋๋ฉด ํ์ด์ง๊ฐ ๋ฆฌ๋ ๋๋ง์ด ๋๋๋ฐ ์ด ๋ use๋ก ์์ํ๋ hooks๋ค์ ๋ฆฌ๋ ๋๋ง ๋์ง ์๋๋ค. ์ด๋ฐ hooks๋ค ๋๋ฌธ์ ํจ์ํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ๋์๋ค. ( memoiazation์ ์ฌ์ฉํ๋ฉด ๋๋จธ์ง ์ ๋ค๋ ํ์ด์ง๊ฐ ๋ฆฌ๋ ๋๋ง ๋์ด๋ ์ฌ๋ผ์ง์ง ์๊ฒ ํ ์ ์๋ค. )
filter๋ฅผ ์ฌ์ฉํ๋ฉด ์ํ๋ ์ ๋ค๋ง ํํฐ๋ง ํ ์ ์๋ค.
๋ค์์ฒ๋ผ ๋ท๋ถ๋ถ์ ์ํ๋ ์กฐ๊ฑด์ ๋ฃ์ด์ฃผ๊ฒ ๋๋ฉด ์กฐ๊ฑด์ ๋ง์ผ๋ฉด ์ด๋ ค์ฃผ๊ณ ๋ง์ง ์์ผ๋ฉด ์ญ์ ๋๋ค.
์ด๋ฐ ๋ชฉ๋ก์์ 3์๊น์ง๋ง ๋ณด์ฌ์ค๋ค๋์ง ์ํ๋ ๊ฐ๋ง ๋ณด์ฌ์ฃผ๊ณ ์ ํ๋ค๋ฉด filter๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
filter์ map์ ๊ฐ์ด ์ฌ์ฉํ ์๋ ์๋ค.
์ด๋ฐ์์ผ๋ก filter๋ฅผ ๋จผ์ ์ฌ์ฉํ ์๋ ์๋ค.
map์ ์ฌ์ฉํ๋ฉด ์๋ณธ์ ๊ฐ์๊ฐ ๊ฐ์ง๋ง filter๊ฐ ๋ค์ด๊ฐ๊ฒ ๋๋ฉด ๊ฒฐ๊ณผ์ ๊ฐฏ์๊ฐ ์๋ณธ์ ๊ฐฏ์๊ฐ ์ ๊ฑฐ๋ ๊ฐ์ ์ ๋ฐ์ ์๋ค.
์ค๋ฌด์์๋ ๋ณดํต map์ ๋ค์์ฒ๋ผ ๊ฒ์๊ธ ๋ชฉ๋ก์ ๋ฟ๋ฆด ๋ ๊ฐ์ฅ ๋ง์ด ์ฐ์ธ๋ค.
ํ๋ฒ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์ filter์ map์ ๊ฐ์ด ์ฌ์ฉํด๋ณด์.
ํ์ค๋ก ๋ณด์ฌ์ผ ํ๋๊น ์คํ์ผ๋ ์ถ๊ฐํด์ค๋ค.
์ด ๋ ์ฝ์์ฐฝ์ ์๋ฌ๊ฐ ๋ฐ ๊ฒ์ด๋ค.
ํค๊ฐ ์๋ค๋ ์๋ฌ๋ค. ๊ฐ์ ์ ๋ค์ด ๊ณ์ ๋ฐ๋ณต๋๋๋ฐ ๋๊ฐ ๋๊ตฐ์ง ๋ชจ๋ฅด๊ฒ ๋ค๊ณ ํ๋๊ฑฐ๋ค.
ํค๊ฐ์ ์ค๋ณต๋๋ฉด ์๋๊ณ ๊ณ ์ ํ ๋ฒํธ์ฌ์ผ ํ๋ค.
์์ฑ์๋ ์ ๋ชฉ์ด ๋์ผํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ชจ๋๊ฐ ๋ค๋ฅด๊ฒ ๊ตฌ๋ถํ ์ ์๋ ํค๊ฐ์ ์ค์ผํ๋ค.
๊ทธ๋ ๋ค๋ฉด map์ el ๋ค์ index ๊ฐ์ ๋ฐ์ ์ ์๋๋ฐ ์ธ๋ฑ์ค๋ฅผ ํค๊ฐ์ผ๋ก ๋ฃ์ด์ค๋ ๋ ๊น?
key={index}
map์์ key๋ก index๋ฅผ ์ฃผ๋ฉด ์๋๋ค.
๊ทธ ์ด์ ๋ ์ญ์ ๋ฅผ ๊ตฌํํ๊ณ ๋์ ์์๋ณด๋๋ก ํ์.
์ญ์ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ณ ๋์ ๋ชฉ๋ก์ ์๋ก ๋ถ๋ฌ์์ผ ํ ๊ฒ์ด๋ค. ๊ทธ ๋ refetch๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
deleteBoard({
variables:{number: Number(event.target.id)},
refetchQueries: [{query: FETCH_BOARDS}]
})
์ด์ map์์ key๋ก index๋ฅผ ์ฃผ๋ฉด ์๋๋ ์ด์ ๋ฅผ ์์๋ณด์.
๋ง์ฝ ์ ํํ ๊ฒ์๊ธ์ ํ๋ ์ญ์ ํ๋ค๊ณ ํด๋ณด์. ํค๋ฅผ ์ธ๋ฑ์ค๋ก ์ฃผ์๋ค๋ฉด ์ญ์ ํ ๊ฒ์๊ธ์ด ๋ฆฌํจ์น๊ฐ ๋ ๊ฒ์ด๋ค. ๊ทธ๋ ๋ค๋ฉด ๊ฒ์๊ธ์ด ์ง์ฐ๋๋ผ๋ ์๋์ ๊ฒ์๊ธ์ด ๋ค์ ์ฌ๋ผ์ค๋ฉด์ ์ญ์ ํ๋ ค๊ณ ์ ํํ ์ธ๋ฑ์ค๊ฐ ๋์ด๋ฒ๋ฆฐ๋ค. ๊ทธ๋ฌ๋ฏ๋ก map์ ๋๋ฆด ๋๋ key๋ฅผ index๋ก ์ฃผ๋ฉด ์๋๋ค!!!
๋ํ map์์ JSX๋ฅผ ๊ฐ์ธ๊ธฐ ์ํด์ ์๋ฌด ์๋ฏธ ์๋ ๋น ํ๊ทธ์ธ Fragment๋ฅผ ์ฌ์ฉํ ์ ์๋๋ฐ key๋ฅผ ์ฃผ๊ธฐ ์ํด์๋ ์ด๋ ๊ฒ ์์ฑํด์ฃผ์ด์ผ ํ๋ค. ๊ทธ๋ฅ <></>
๋นํ๊ทธ ์์ฑ์ key๋ฅผ ์ค ์ ์๋ค.