
[vue.js] v-if์ v-show์ ์ฐจ์ด์ ์ฌ์ฉ ๋ฐฉ๋ฒ ๊ตฌ๋ถ
ยท
Languages/JavaScript
v-if ์กฐ๊ฑด์ผ๋ก ๋ ๋๋งํ๊ธฐ ์กฐ๊ฑด์ ๋ง์กฑํ์ง ๋ชปํ ๊ฒฝ์ฐ์ ์์๋ DOM ๋ ๋ฒจ์์ ์ ๊ฑฐ๋๋ฉฐ, ๋ชจ๋ ๊ฐ์๋ ์ ๊ฑฐ ๋ฉ๋๋ค. ์ปดํฌ๋ํธ๋ผ๋ฉด ์ธ์คํด์ค๊ฐ ์ ๊ฑฐ๋๋ฉฐ, ์ดํ์ ๋ ๋๋ง ๋ ๋ ๋ชจ๋ ์ํ๊ฐ ์ด๊ธฐํ ๋์ด๋ฒ๋ฆฝ๋๋ค. ๋ด๋ถ์์ ๋๋ ํฐ๋ธ ๋๋ ์ปดํฌ๋๋๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, ํน์ ํ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ก ๊ฐ์ง๊ณ ์์ง ์๋ค๋ฉด ์ค๋ฅ๊ฐ ๋ฐ์ํ์ ๋ v-if๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค. v-show ์กฐ๊ฑด์ผ๋ก ์ถ๋ ฅํ๊ธฐ ์กฐ๊ฑด์ ๋ง์กฑํ์ง ์๋ ๊ฒฝ์ฐ, ๋จ์ํ๊ฒ display:none; ์คํ์ผ์ ์ ์ฉํฉ๋๋ค. ๋์ ๋ณด์ด์ง ์๋๋ผ๋ ๋ชจ๋ ๋ฆฌ์กํฐ๋ธ ๋ฐ์ดํฐ์ ๋ํ ๋ด๋ถ์ ์ธ ๊ฐ์๊ฐ ์ผ์ด๋๋ฏ๋ก ์ฃผ์ํด ์ฃผ์ธ์. ๋ด๋ถ์ ๋๋ ํฐ๋ธ ๋๋ ์ปดํฌ๋ํธ๊ฐ ์๊ณ , ๋ณ๊ฒฝ ๋น๋๊ฐ ๋์ ๊ฒฝ์ฐ์๋ v-show๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ฑ๋ฅ ๋ฉด์์ ์ข์ต๋๋ค.