1. ๋ฆฌ์กํธ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ๊ฐ ํ๋ ์์ํฌ์ธ๊ฐ
2. ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ ์ด์
3. virtual DOM์ด๋
4. ๋ฆฌ์กํธ ๋ ๋๋ง
5. ๋ฆฌ์กํธ ํ์ด๋ฒ
6. ๋ฆฌ์กํธ ํ์ด๋ฒ ํธ๋ฆฌ
7. ๋ฆฌ์กํธ ํ์ด๋ฒ, DOM ๊ทธ๋ฆฌ๊ณ virtual DOM์ ๊ด๊ณ
8. ๋ ๋ ๋จ๊ณ์ ์ปค๋ฐ ๋จ๊ณ
1. ๋ฆฌ์กํธ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ๊ฐ ํ๋ ์์ํฌ์ธ๊ฐ โญ๏ธ
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- ํน์ ๊ธฐ๋ฅ์ ๋ํ API(๋๊ตฌ/ํจ์)๋ฅผ ๋ชจ์ ์งํฉ
- ํ๋ ์์ํฌ
- Application ๊ฐ๋ฐ์ ์ฝ๋์ ํ์ง, ํ์์ ์ธ ์ฝ๋, ์๊ณ ๋ฆฌ์ฆ, ์ํธํ, ๋ฐ๋ฒ ์ฐ๋ ๊ฐ์ ๊ธฐ๋ฅ๋ค์ ์ด๋ ์ ๋ ๊ตฌ์ฑ์ด ๋์ด์๋ ๋ผ๋(๊ตฌ์กฐ)๋ฅผ ์ ๊ณตํ๋๋ก ๋ง๋ค์ด์ง ๊ฒ
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ vs. ํ๋ ์์ํฌ
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋๋ ์ ํ๋ฆฌ์ผ์ด์ ํ๋ฆ์ ์ง์ ์ ์ดํจ
- ๋จ์ง ๋์ํ๋ ์ค์ ํ์ํ ๊ธฐ๋ฅ์ด ์์ ๋ ๋ฅ๋์ ์ผ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ๋ฟ์
- ํ๋ ์์ํฌ๋ ๊ฑฐ๊พธ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋๊ฐ ํ๋ ์์ํฌ์ ์ํด ์ฌ์ฉ๋จ
- ํ๋ ์์ํฌ์๋ ๋ถ๋ช ํ ์ ์ด์ ์ญ์ ๊ฐ๋ ์ด ์ ์ฉ๋์ด ์์ด์ผ ํจ
- ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋๋ ํ๋ ์์ํฌ๊ฐ ์ง๋์ ํ์์ ์๋์ ์ผ๋ก ๋์ํด์ผํจ
- ๊ฒฐ๋ก !
- ์ดํ๋ฆฌ์ผ์ด์ ์ ํ๋ฆ์ ๋๊ฐ ์ ์ดํ๋๋์ ๋ฐ๋ผ ํ๋ ์์ํฌ์ธ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ์ง ๊ตฌ๋ถํ ์ ์์
2. ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ ์ด์ โญ๏ธโญ๏ธ
- ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ํ๋ฉด ๊ตฌ์ฑ
- ๋ฆฌ์กํธ๋ ํ๋ฉด์ ํ ๋ถ๋ถ์ ์ปดํฌ๋ํธ๋ผ๋ ๋จ์๋ก ๋๋ ์ ์์ผ๋ฉฐ ๋ ๋ฆฝ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์๋ค
- ๋๊ท๋ชจ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ปดํฌ๋ํธ๋ ์ญํ ๊ณผ ๊ธฐ๋ฅ์ ๋ฐ๋ผ ๋ฐ๋ก ๊ด๋ฆฌํ๊ธฐ ์ฉ์ดํ๋ฉฐ, ๋ฐ๋ณต๋๋ ๋ถ๋ถ์ ๋์ฒดํ ์ ์๊ฒ ํด์ฃผ์ด์ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ์ ๋์ฌ์ค๋ค.
- ๋ํ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ํ๋ฉด์ ๊ตฌ์ฑํ๋ค๋ฉด ๋ธ๋ก ์๊ธฐ์ฒ๋ผ ์ปดํฌ๋ํธ๋ฅผ ์์์ ๋น ๋ฅด๊ณ ํจ์จ์ ์ผ๋ก ํ๋ฉด์ ๊ตฌ์ฑํ ์ ์๋ค.
- virtual Dom์ผ๋ก ์ธํ ์ถฉ๋ถํ ๋น ๋ฅธ ์๋
- virtual Dom์ UI์ ์ด์์ ์ธ ๋๋ "๊ฐ์"์ ์ธ ํํ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํ๊ณ ReactDOM๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ํด "์ค์ " DOM๊ณผ ๋๊ธฐํํ๋ ํ๋ก๊ทธ๋๋ฐ ๊ฐ๋ (์ด ๊ณผ์ ์ ์ฌ์กฐ์ (reconciliation)์ด๋ผ๊ณ ํจ)
- ์ด ์ ๊ทผ ๋ฐฉ์์ด React์ ์ ์ธ์ API๋ฅผ ๊ฐ๋ฅํ๊ฒ ํจ
- SPA(์ฑ๊ธ ํ์ด์ง ์ดํ๋ฆฌ์ผ์ด์
)
- ์ฅ์ : ์๋ฒ ์์ ์๋ ์ ์๊ณ ๋ ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋๋ฆด ์ ์์
- ๋จ์ : ์ฌ์ฉ์์ ์ธํฐ๋ ์ ์ด ๋ง์ ๊ฒฝ์ฐ์๋ ์๋ฒ์ ์์์ด ๋ง์ด ์ฌ์ฉ๋๊ณ ๋ถํ์ํ ํธ๋ํฝ์ด ๋ญ๋น ๋ ์๋
- ๊ฒฐ๋ก !
- ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด์ ์ ์ง๋ณด์๊ฐ ์ฉ์ดํจ(ํ์ํ ๋ถ๋ถ์ ์ปดํฌ๋ํธ๋ง ๋ ๋๋ง๋จ. ์ต์ ํ๋ ๋ ๋๋ง ๊ฐ๋ฅ)
- virtual DOM ํ์ฉํด์ ๋น ๋ฅธ ๋ ๋๋ง ๊ฐ๋ฅ
3. virtual DOM์ด๋ โญ๏ธโญ๏ธ
- DOM(Document Object Model)
- XML ์ด๋ HTML ๋ฌธ์์ ์ ๊ทผํ๊ธฐ ์ํ ์ผ์ข ์ ์ธํฐํ์ด์ค
- ๋ฌธ์์ ๊ตฌ์กฐํ๋ ํํ(structured representation)์ ์ ๊ณต, ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ DOM ๊ตฌ์กฐ์ ์ ๊ทผํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํด ๋ฌธ์ ๊ตฌ์กฐ, ์คํ์ผ, ๋ด์ฉ ๋ฑ์ ๋ณ๊ฒฝํ ์ ์๊ฒ ๋์
- ์๋ก์ด ์์ฒญ์ด ์์ผ๋ฉด `HTTP response > DOM tree > CSSOM tree > render tree > painting` ํํ๋ฅผ ๊ฑฐ์ฒ ๋ฆฌ๋ ๋๋ง์ ํ๊ฒ ๋จ
- DOM์ ์๋๋ ๋๋ฆฌ์ง ์์ง๋ง ๋งค๋ฒ ์๋กญ๊ฒ ๊ตฌ์ฑํ๊ธฐ ๋๋ฌธ์ ์์ด ๋ง์ผ๋ฉด ํผํฌ๋จผ์ค๊ฐ ๋จ์ด์ง
- ๊ทธ๋์ Virtual DOM์ด ๋์ด์คํ๋ค!
- virtual DOM
- DOM์ ์ ๊ทผํด ์กฐ์ํ๋ ๊ฒ์ ์ถ์ํํ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด๋ฅผ ๊ตฌ์ฑํด ์ฌ์ฉ(์ค์ DOM์ ๊ฐ๋ฒผ์ด ์ฌ๋ณธ๊ณผ ๋น์ทํจ) → ์ ๋ฐ์ดํธ ์ฒ๋ฆฌ ๊ฐ๊ฒฐ์ฑ ์ ๊ณต
- ๋ฆฌ์กํธ์์ ๋ฐ์ดํฐ๊ฐ ๋ณํ์ฌ ์น ๋ธ๋ผ์ฐ์ ์ ์ค์ DOM์ ์
๋ฐ์ดํธํ ๋ ๋ค์ ์ธ ๊ฐ์ง ์ ์ฐจ๋ฅผ ๋ฐ์
โ ์ ์ฒด UI๋ฅผ virtual DOM์ ๋ฆฌ๋ ๋๋ง
โก ์ด์ ๋ด์ฉ๊ณผ ํ์ฌ ๋ด์ฉ ๋น๊ต
โข ๋ฐ๋ ๋ถ๋ถ๋ง ์ค์ DOM์ ์ ์ฉ - virtual DOM ์ฌ์ฉํ๋ค๊ณ ํด์ ๋ฌด์กฐ๊ฑด ๋น ๋ฅธ ๊ฑด ์๋(์ง์์ ์ผ๋ก ๋ฐ์ดํฐ๊ฐ ๋ณํํ๋ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ์ ์ ์ฉ)
4. ๋ฆฌ์กํธ ๋ ๋๋ง
- ๋ธ๋ผ์ฐ์ ๋ ๋๋ง
- HTML๊ณผ CSS ๋ฆฌ์์ค๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์นํ์ด์ง์ ํ์ํ UI๋ฅผ ๊ทธ๋ฆฌ๋ ๊ณผ์
- ๋ฆฌ์กํธ ๋ ๋๋ง
- ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ๋๋ง์ ํ์ํ DOM ํธ๋ฆฌ๋ฅผ ๋ง๋๋ ๊ณผ์ → ๋ธ๋ผ์ฐ์ ๋ ๋๋ง๋ณด๋ค ๋จผ์ ์คํ๋จ
- ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ํธ๋ฆฌ ์์ ์๋ ๋ชจ๋ ์ปดํฌ๋ํธ๋ค์ด ํ์ฌ ์์ ์ด ๊ฐ์ง๊ณ ์๋ props๊ณผ state์ ๊ฐ์ ๊ธฐ๋ฐ์ผ๋ก ์ด๋ป๊ฒ UI๋ฅผ ๊ตฌ์ฑํ๊ณ ์ด๋ฅผ ๋ฐํ์ผ๋ก ์ด๋ค DOM ๊ฒฐ๊ณผ๋ฅผ ๋ธ๋ผ์ฐ์ ์ ์ ๊ณตํ ๊ฒ์ธ์ง ๊ณ์ฐํ๋ ์ผ๋ จ์ ๊ณผ์ ์
5. ๋ฆฌ์กํธ ํ์ด๋ฒ
- ๋ฆฌ์กํธ ํ์ด๋ฒ
- ๋ฆฌ์กํธ์์ ๊ด๋ฆฌํ๋ ํ๋ฒํ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด
- ํ์ด๋ฒ ์ฌ์กฐ์ ์(fiber reconciler)๊ฐ ๊ด๋ฆฌํ๋๋ฐ, ๊ฐ์ DOM๊ณผ ์ค์ DOM์ ๋น๊ตํด ๋ณ๊ฒฝ ์ฌํญ์ ์์งํ๋ฉฐ, ๋ง์ฝ ๋ ์ฌ์ด์ ์ฐจ์ด๊ฐ ์์ผ๋ฉด ๋ณ๊ฒฝ์ ๊ด๋ จ๋ ์ ๋ณด๋ฅผ ๊ฐ์ง๊ณ ์๋ ํ์ด๋ฒ ๊ธฐ์ค์ผ๋ก ํ๋ฉด์ ๋ ๋๋ง์ ์์ฒญํ๋ ์ญํ
- ๋ฆฌ์กํธ ์ฑ์์ ๋ฐ์ํ๋ ์ ๋๋ฉ์ด์ , ๋ ์ด์์, ์ฌ์ฉ์ ์ธํฐ๋ ์ ์ ์ฌ๋ฐ๋ฅธ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋๋ ๋ฐ์์ฑ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๊ฒ์ด ๋ชฉํ
- ๋ชจ๋ ๊ณผ์ ์ ๋น๋๊ธฐ๋ก ์ผ์ด๋๊ณ , ์์ ์ ์ค์ผ์ค๋งํ๊ธฐ๋ ํจ
6. ๋ฆฌ์กํธ ํ์ด๋ฒ ํธ๋ฆฌ
- current fiber tree
- ํ์ฌ ํ๋ฉด์ ๋ ๋๋ง๋์ด ์๋ UI ์ํ(์ค์ DOM์ ํ์ฌ ๋ชจ์ต์ ๊ฐ์์ ์ผ๋ก ํํ)
- ํธ๋ฆฌ ๋ ธ๋๋ค์ ์ค์ DOM ๋ ธ๋์ 1:1 ๋์ ๊ด๊ณ๋ฅผ ๊ฐ์ง
- workInProgress fiber tree
- ๋ค์ ๋ ๋๋ง ์์ ์ ์ ๋ฐ์ดํธ๋ UI ์ํ๋ฅผ ๊ณ์ฐํ๊ธฐ ์ํด ์ฌ์ฉ
- virtual DOM์ ์ญํ ์ ํจ. ์ฌ๊ธฐ์ ์๋ก์ด virtual DOM ํธ๋ฆฌ๊ฐ ์์ฑ๋๊ณ ๊ณ์ฐ๋จ
- ๋ฆฌ์กํธ ํ์ด๋ฒ์ ์์ ์ด ๋๋๋ฉด ๋ฆฌ์กํธ๋ ๋จ์ํ ํฌ์ธํฐ๋ง ๋ณ๊ฒฝํด workInProgress fiber tree๋ฅผ current fiber tree๋ก ๋ฐ๊ฟ(๋๋ธ ๋ฒํผ๋ง)
7. ๋ฆฌ์กํธ ํ์ด๋ฒ, DOM ๊ทธ๋ฆฌ๊ณ virtual DOM์ ๊ด๊ณ
- current fiber tree๋ ํ์ฌ ์ํ๋ฅผ ๋ํ๋ด๊ณ workInProgress fiber tree๋ virtual DOM์ ์ญํ ์ ํด ๋ค์ ๋ ๋๋ง ์์ ์ ๊ณ์ฐํจ
- Reconciliation ๊ณผ์ ์ ๊ฑฐ์ณ ๋ณ๊ฒฝ ์ฌํญ๋ง ์ค์ DOM์ ๋ฐ์๋๊ณ workInProgress fiber tree๊ฐ ์๋ก์ด current fiber tree๊ฐ ๋จ
- Reconciliation ๊ณผ์
- current fiber tree์ workInProgress fiber tree๋ฅผ ๋น๊ตํด ๋ณ๊ฒฝ๋ ๋ถ๋ถ ์ฐพ๊ธฐ
8. ๋ ๋ ๋จ๊ณ์ ์ปค๋ฐ ๋จ๊ณ
- ๋ ๋ ๋จ๊ณ(Render Phase)
- virtual DOM ํธ๋ฆฌ์ ๋ณ๊ฒฝ ์ฌํญ์ ๊ณ์ฐํ๊ณ ๋ฉ๋ชจ๋ฆฌ์ ์๋ก์ด virtual DOM ํธ๋ฆฌ๋ฅผ ์์ฑํ๋ ๋จ๊ณ
- ๋ฉ๋ชจ๋ฆฌ ์์์ ์ด๋ฃจ์ด์ง๋ฉฐ ์ค์ DOM์๋ ์๋ฌด๋ฐ ๋ณํ๊ฐ ์ผ์ด๋์ง ์์
- ์ปค๋ฐ ๋จ๊ณ(Commit Phase)
- ๋ ๋๋ง ๋จ๊ณ์์ ๊ณ์ฐ๋ ๋ณ๊ฒฝ ์ฌํญ์ ์ค์ DOM์ ๋ฐ์ํ๋ ๋จ๊ณ
- ํ์ํ DOM ๋ ธ๋๋ฅผ ๋ฉ๋ชจ๋ฆฌ์ ์ถ๊ฐ, ๋ณ๊ฒฝ ๋ฐ ์ ๊ฑฐํจ
- ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ฑ์ ์ ๋ฐ์ดํธ๋ ์ํ
- ์ปค๋ฐ ๋จ๊ณ๊ฐ ์๋ฃ๋๋ฉด ๋ณ๊ฒฝ๋ DOM์ด ํ๋ฉด์ ๋ฐ์๋จ
- ๋ ๋๋ง์ ์ปค๋ฐ ๋จ๊ณ๋ฅผ ๋ถ๋ฆฌํจ์ผ๋ก react๋ ์ฑ๋ฅ์ ์ต์ ํํจ
- ๋ฉ๋ชจ๋ฆฌ ์์์ ๋ ๋๋ง ์์ ์ ์ํํ๋ฏ๋ก DOM ์์ ์ ๋นํด ๋น ๋ฆ
- ์ค์ DOM ๋ณ๊ฒฝ์ ์ต์ํ์ผ๋ก ์ ์ง๋์ด ๋๋ฆฐ DOM whwkrdmf wnfdla
- ๋ ๋๋ง ๋จ๊ณ์์ ์ ๋ฐ์ดํธ ๋ก์ง์ ์ค๋จํ ์ ์์ด ์ฌ์ฉ์ ์ํธ์์ฉ์ ๋์ฑ ๋ฐ์์ ์