[vue.js] v-if์™€ v-show์˜ ์ฐจ์ด์™€ ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ๊ตฌ๋ถ„
ยท
Languages/JavaScript
v-if ์กฐ๊ฑด์œผ๋กœ ๋ Œ๋”๋งํ•˜๊ธฐ ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜์ง€ ๋ชปํ•œ ๊ฒฝ์šฐ์— ์š”์†Œ๋Š” DOM ๋ ˆ๋ฒจ์—์„œ ์ œ๊ฑฐ๋˜๋ฉฐ, ๋ชจ๋“  ๊ฐ์‹œ๋„ ์ œ๊ฑฐ ๋ฉ๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋ผ๋ฉด ์ธ์Šคํ„ด์Šค๊ฐ€ ์ œ๊ฑฐ๋˜๋ฉฐ, ์ดํ›„์— ๋ Œ๋”๋ง ๋  ๋•Œ ๋ชจ๋“  ์ƒํƒœ๊ฐ€ ์ดˆ๊ธฐํ™” ๋˜์–ด๋ฒ„๋ฆฝ๋‹ˆ๋‹ค. ๋‚ด๋ถ€์—์„œ ๋””๋ ‰ํ‹ฐ๋ธŒ ๋˜๋Š” ์ปดํฌ๋„ˆ๋Š”๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ํŠน์ •ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋”ฐ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š๋‹ค๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ v-if๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. v-show ์กฐ๊ฑด์œผ๋กœ ์ถœ๋ ฅํ•˜๊ธฐ ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ, ๋‹จ์ˆœํ•˜๊ฒŒ display:none; ์Šคํƒ€์ผ์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ˆˆ์— ๋ณด์ด์ง€ ์•Š๋”๋ผ๋„ ๋ชจ๋“  ๋ฆฌ์•กํ‹ฐ๋ธŒ ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ๋‚ด๋ถ€์ ์ธ ๊ฐ์‹œ๊ฐ€ ์ผ์–ด๋‚˜๋ฏ€๋กœ ์ฃผ์˜ํ•ด ์ฃผ์„ธ์š”. ๋‚ด๋ถ€์— ๋””๋ ‰ํ‹ฐ๋ธŒ ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—†๊ณ , ๋ณ€๊ฒฝ ๋นˆ๋„๊ฐ€ ๋†’์€ ๊ฒฝ์šฐ์—๋Š” v-show๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์„ฑ๋Šฅ ๋ฉด์—์„œ ์ข‹์Šต๋‹ˆ๋‹ค.