2.6.11
https://codesandbox.io/embed/heuristic-brown-u7rvw?fontsize=14&hidenavigation=1&theme=dark
์ฒดํฌ ๋ฐ์ค๋ฅผ ํด๋ฆญํฉ๋๋ค.
ํ๋์ ๋ฐฐ๊ฒฝ์์ผ๋ก "BLUE BOX"๋ผ๊ณ ํ์๋์ด์ผํฉ๋๋ค.
๋ฐฐ๊ฒฝ์์ด์๋ "BLUE BOX"๋ผ๊ณ ๋์ด ์์ต๋๋ค.
์ด ๋ฌธ์ ๋ ๋ฐ์ดํฐ -v- * ์์ฑ์ด ๊ต์ฒด ๋ ๋ blue_block div์ ๋ํด ์ฌ์ค์ ๋์ง ์๊ธฐ ๋๋ฌธ์ ๋ฐ์ํฉ๋๋ค. ๊ธฐ๋ฅ ๊ตฌ์ฑ ์์์์ ํ์ div์ data-v- * ์์ฑ์ ์ฌ์ ํ ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ๋ฐ๋ผ์ CSS ํด๋์ค ์คํ์ผ์ด ์ ์ฉ๋์ง ์์ต๋๋ค.
๊ธฐ๋ฅ์ ๊ตฌ์ฑ ์์์์ ๋ค๋ฅธ ๊ฒ์ผ๋ก ๊ต์ฒดํ๋ ๊ฒ์ด ์ ์ฉํฉ๋๋ค. ์ : ๋ ๋ณต์กํ ๊ตฌ์ฑ ์์๋ก ๊ต์ฒดํ๊ธฐ ์ ์ ๊ฐ๋จํ ๋ก๋ฉ ๋ฐ ๊ตฌ์ฑ ์์๋ฅผ ํ์ ํ ๋.
Vue๊ฐ ์
๋ฐ์ดํธ ์ค์ ๋
ธ๋๋ฅผ ์ฌํ์ฉํ๋ ๋ฐฉ๋ฒ๊ณผ ๊ด๋ จ์ด ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ํด๊ฒฐ ๋ฐฉ๋ฒ์ผ๋ก key
๋ฅผ ๊ตฌ์ฑ ์์์ div ๋ชจ๋์ ์ถ๊ฐํ๋ฉด ์์๋๋ ๋์์ด ์์ฑ๋ฉ๋๋ค.
https://github.com/vuejs/vue/issues/10416 ๊ณผ ๊ด๋ จ์ด์์ ์ ์์ต๋๋ค.
ํ ์คํธ
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
Vue๊ฐ ์ ๋ฐ์ดํธ ์ค์ ๋ ธ๋๋ฅผ ์ฌํ์ฉํ๋ ๋ฐฉ๋ฒ๊ณผ ๊ด๋ จ์ด ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ํด๊ฒฐ ๋ฐฉ๋ฒ์ผ๋ก
key
๋ฅผ ๊ตฌ์ฑ ์์์ div ๋ชจ๋์ ์ถ๊ฐํ๋ฉด ์์๋๋ ๋์์ด ์์ฑ๋ฉ๋๋ค.