1. ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ํ์ดํ๋ผ์ธ์ ๋ํด์ ์ค๋ช ํด์ฃผ์ธ์.
- ์๊ณ ์๋ ๋ด์ฉ
๋จผ์ ๋ธ๋ผ์ฐ๋๋ HTML์ ํ์ฑํ์ฌ document object model, ์ฆ DOM์ ์์ฑํฉ๋๋ค.
์ด๋ css ํ์ผ์ ๋ง๋๋ฉด DOM์์ฑ์ ์ ์ ์ค๋จํ๊ณ ํ์ฑํ์ฌ CSSOM์ ์์ฑํ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ง๋๋ฉด ์ญ์ DOM์์ฑ์ ์ค๋จํ๊ณ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฑํฉ๋๋ค. ๋ชจ๋ ์ฝ๋๋ฅผ ํ์ฑํ๋ฉด DOM๊ณผ CSSOM์ ํฉ์ณ ๋ ๋ํธ๋ฆฌ๋ฅผ ์์ฑํฉ๋๋ค. ๋ง์ง๋ง์ผ๋ก ๋ ์ด์์๊ณผ ํ์ธํธ ๊ณผ์ ์ด ์งํ๋๋ฉฐ ์นํ์ด์ง๋ฅผ ๊ทธ๋ฆฌ๋ ์์ผ๋ก ๋ ๋๋ง์ด ์งํ๋ฉ๋๋ค.
- ๋งค์ผ๋ฉ์ผ๋ก ๋ณด์ถฉํ ๋ด์ฉ
๋ธ๋ผ์ฐ์ ๋ ๋๋ง ํ์ดํ๋ผ์ธ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์นํ์ด์ง๋ฅผ ํ๋ฉด์ ํ์ํ๊ธฐ ์ํด ๊ฑฐ์น๋ ๊ณผ์ ์ ์๋ฏธํฉ๋๋ค. ์ ๋ ์ด ๊ณผ์ ์ 5๋จ๊ณ๋ก ๋๋ ์ค๋ช
ํด๋ณด๊ฒ ์ต๋๋ค.
์ฒซ ๋ฒ์งธ๋ก DOMํธ๋ฆฌ ์์ฑ ๋จ๊ณ์
๋๋ค. ๋ธ๋ผ์ฐ์ ๋ HTMLํ์ผ์์ ๋ฐ์ผ๋ฉด ์ด ํ์ผ์ ๋ฐ์ดํธ ๋จ์๋ก ์ฝ๊ณ ๋ฌธ์๋ก ๋ณํ ํ ๋ค HTMLํ ํฐ์ผ๋ก ๋ณํํฉ๋๋ค. ์ดํ ํ ํฐ์ ์ด์ฉํ์ฌ DOMํธ๋ฆฌ๋ฅผ ์์ฑํฉ๋๋ค.
๋ ๋ฒ์งธ๋ก DOM์์ฑ CSS ํ์ผ์ ํ์ฑํ์ฌ CSSOM ํธ๋ฆฌ๋ฅผ ์์ฑํฉ๋๋ค.
์ธ ๋ฒ์งธ๋ก DOM๊ณผ CSSOMํธ๋ฆฌ๊ฐ ๋ค ์์ฑ๋๋ฉด ์ด๋ฅผ ๊ฒฐํฉํด ๋ ํฐ ํธ๋ฆฌ๋ฅผ ์์ฑํฉ๋๋ค. ๋ ๋ ํธ๋ฆฌ์๋ ์ค์ ๋ก ํ๋ฉด์ ํ์๋ ์์๋ก๋ง ๊ตฌ์ฑ๋ฉ๋๋ค.
๋ค ๋ฒ์งธ๋ก ๋ ์ด์์ ๋จ๊ณ์
๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ๋ ๋ ํธ๋ฆฌ๋ฅผ ์ด์ฉํด ๊ฐ ์์์ ์ ํํ ์์น์ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ ํ๋ ๋ ์ด์์ ๋จ๊ณ๋ฅผ ์งํํฉ๋๋ค.
๋ง์ง๋ง์ผ๋ก ํ์ธํ
๋จ๊ณ์
๋๋ค. ๋ ์ด์์์ด ์๋ฃ๋๋ฉด ๋ธ๋ผ์ฐ์ ๋ ๊ฐ ์์๋ฅผ ์ค์ ๋ก ํ๋ฉด์ ๊ทธ๋ฆฌ๋ ์์
์ ํฉ๋๋ค.
๋ธ๋ผ์ฐ์ ๋ ๋๋ง์ ์ด๋ ๊ฒ 5๋จ๊ณ๋ก ๋๋ ์ค๋ช
ํ ์ ์์ต๋๋ค.
'Private > ๋ฉด์ ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
ํ๋ก ํธ์๋ ๋ฉด์ (hydrate, render) (0) | 2024.11.21 |
---|---|
ํ๋ก ํธ์๋ ๋ฉด์ (ํด๋์ค) (1) | 2024.11.20 |
ํ๋ก ํธ์๋ ๋ฉด์ (HTTP ํต์ ) (1) | 2024.11.18 |
ํ๋ก ํธ์๋ ๋ฉด์ (props, state) (1) | 2024.11.16 |
ํ๋ก ํธ์๋ ๋ฉด์ (์ด๋ฒคํธ ๋ฃจํ) (0) | 2024.11.13 |