๋ถ๋ช ํ React๋ Virtual DOM์ ๋ํด ๊ตฌ๋ณํ ์ ์๊ฒ ํ๋ ํค๊ฐ ์๋ ์ค์ฒฉ ๊ตฌ์ฑ ์์๋ฅผ ์ข์ํ์ง ์์ต๋๋ค. ๋ค์ ๋ฆด๋ฆฌ์ค์์ ์ด๋ฌํ ์์์ ๋ํ ํค๋ฅผ ์๋์ผ๋ก ์์ฑํ ์ ์์ต๋๊น?
์ฐ๋ฆฌ๋ ๋ฐ์ ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณตํ์ง ์์ต๋๋ค. V2์ ์กด์ฌํ๋ ๋ฐ๋ชจ๋ ๋จ์ง ์์๋ฅผ ์ํ ๊ฒ์ด๋ฉฐ ํ ์คํธ๋ฅผ ์ํ ๋ง์ผ์คํค ๋ฆด๋ฆฌ์ค๊ฐ ๋์ฌ ๋๊น์ง ์ ๋ฐ์ดํธ๋ฅผ ์ ์งํ๋ ์ฐ์ ์์๊ฐ ์๋๊ธฐ ๋๋ฌธ์ ๋๋๋ก ๋ค์ณ์ง ์ ์์ต๋๋ค.
React ๊ตฌ์ฑ ์์๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด MDL์ฉ ํ์ฌ ๋ํผ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค๊ณ ๊ฐ์ ํฉ๋๋ค. ๊ทธ๋ ๋ค๋ฉด ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์ฑ์์๊ฒ ๋ฌธ์ํ์ญ์์ค. ์ด๊ฒ์ด MDL ๋ด๋ถ์ ๋ฌธ์ ์ธ ๊ฒฝ์ฐ ์ฝ๋๋ก ์ ํํ ๋ฌด์์ ํ๊ณ ์๋์ง์ ๋ํ ์์ธํ ์ ๋ณด๋ฅผ ์ ๊ณตํ์ญ์์ค(์ฌ๊ธฐ์์ ๋งค์ฐ ์ ์ฉํ ๋ผ์ด๋ธ ์์ ). ๊ฑฐ๊ธฐ์์ ๋ฌธ์ ๋ฅผ ํ๊ฐํ์ฌ ์กฐ์น๋ฅผ ์ทจํด์ผ ํ๋์ง ํ์ธํ ์ ์์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค.
์ฃ์กํฉ๋๋ค. ๋ฐฉ๊ธ .mdl-layout ๋ฐ .mdl-layout__drawer๋ฅผ ์ฌ์ฉํ์ผ๋ฉฐ React์์ ๊ฒฝ๊ณ ๋ฅผ ๋ฐ์์ํค๋ ์ค์ฒฉ <li/>
๊ฐ ์๋ ๋งํฌ์
์ ๋น๋ํ๋ค๋ ์ฌ์ค์ ์์ด๋ฒ๋ ธ์ต๋๋ค. ์๋ง๋ React์ Virtual DOM์ด ๊ทธ๊ฒ์ ์ข์ํ์ง ์๋๋ค๋ ์ ๋ณด๋ฅผ ๋ฐ๋ ๊ฒ์ด ์ข์ ๊ฒ์
๋๋ค.
React Tabs์์ < li> ๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ํ ๋ ๋์ผํ ๋ฌธ์ ์ ์ง๋ฉดํจ
```
์น์
์ผ๋ฐ ์ค์
@ Atmiya735 ๋๋ ๊ฒฝ๊ณ ๊ฐ ๋จ์ง HTML ์ค์ฒฉ์ด ์ ํจํ์ง ์๋ค๋ ๊ฒ์ ์ง์ ํ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
ul
์ ํ์ฉ๋ ๋ด์ฉ์ "0๊ฐ ์ด์ \
li
์ ํ์ฉ๋ ๋ด์ฉ์ li
์์ฒด๊ฐ ์๋ ํ๋ก์ฐ ๋ด์ฉ ์ด๋ฏ๋ก ๋ค๋ฅธ ๊ฒฝ์ฐ์๋ ๊ฒฝ๊ณ ๊ฐ ํ์๋ฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ฃ์กํฉ๋๋ค. ๋ฐฉ๊ธ .mdl-layout ๋ฐ .mdl-layout__drawer๋ฅผ ์ฌ์ฉํ์ผ๋ฉฐ React์์ ๊ฒฝ๊ณ ๋ฅผ ๋ฐ์์ํค๋ ์ค์ฒฉ
<li/>
๊ฐ ์๋ ๋งํฌ์ ์ ๋น๋ํ๋ค๋ ์ฌ์ค์ ์์ด๋ฒ๋ ธ์ต๋๋ค. ์๋ง๋ React์ Virtual DOM์ด ๊ทธ๊ฒ์ ์ข์ํ์ง ์๋๋ค๋ ์ ๋ณด๋ฅผ ๋ฐ๋ ๊ฒ์ด ์ข์ ๊ฒ์ ๋๋ค.