์ด๋ฒ ํฌ์คํ ์ "๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ " ์์ ์ ํ์ตํ๋ฉฐ ๋ด์ฉ์ ์ ๋ฆฌํ์์ต๋๋ค.
์ ๋ฆฌ์กํธ์ธ๊ฐ?
์ต๊ทผ ๋ช ๋ ๊ฐ ์ ์ธ๊ณ ๊ฐ๋ฐ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋จ๋ฝ๊ฒ ์ด๊ดํ๊ณ ์์ต๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ๊ฐ์ฅ ํต์ฌ์ ์ธ ์ญํ ์ ํ๊ณ ์์ต๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด๋ง์ผ๋ก ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์ , ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ๋ฑ ๊ท๋ชจ๊ฐ ํฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋ ์๋์ ๋๋ค. ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์ค ํ๋ฐํธ์๋ ์ฌ์ด๋์์ ๋์๊ฐ๋ ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์กฐ๋ฅผ ๊ด๋ฆฌํ๋ ค๋ฉด.. ์ด๋ป๊ฒ ํด์ผ ํ ๊น์?
์ด์ ํ์ด์ค๋ถ ๊ฐ๋ฐํ์ ์์ด๋์ด๋ฅผ ๊ณ ์ํด ๋์ต๋๋ค.
์ด๋ค ๋ฐ์ดํฐ๊ฐ ๋ณํ ๋๋ง๋ค ์ด๋ค ๋ณํ๋ฅผ ์ค์ง ๊ณ ๋ฏผํ๋ ๊ฒ์ด ์๋๋ผ ๊ทธ๋ฅ ๊ธฐ์กด ๋ทฐ๋ฅผ ๋ ๋ ค ๋ฒ๋ฆฌ๊ณ ์ฒ์๋ถํฐ ์๋ก ๋ ๋๋ง ํ๋ค.
์ด๋ ๊ฒ ํ๊ฒ๋๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์กฐ๊ฐ ๋งค์ฐ ๊ฐ๋จํด์ง๊ณ , ์์ฑํด์ผ ํ ์ฝ๋์์ด ๋ง์ด ์ค์ด ๋ค๋ฉฐ, ๋ ์ด์ ์ด๋ป๊ฒ ๋ณํ๋ฅผ ์ค์ง ์ ๊ฒฝ ์ธ ํ์๊ฐ ์๊ณ , ๊ทธ์ ๋ทฐ๊ฐ ์ด๋ป๊ฒ ์๊ธธ์ง ์ ์ธ๋ง ํ๋ฉด ๋๋ฉฐ, ๋ฐ์ดํฐ ๋ณํ๊ฐ ์์ผ๋ฉด ๊ธฐ์กด์ ์๋ ๊ฒ์ ๋ฒ๋ฆฌ๊ณ ์๋ก ๋ ๋๋ง ๋๊ฒ ๋ฉ๋๋ค.
ํ์ด์ค๋ถ ๊ฐ๋ฐ ํ์ ์ด๋ฐ ๋ฐฉ์์ ์ฑํํ์ฌ ์ต๋ํ ์ฑ๋ฅ์ ์๋ผ๊ณ ํธ์ํ ์ฌ์ฉ์ ๊ฒฝํ(user experience)์ ์ ๊ณตํ๋ฉด์ ๊ตฌํํ๊ณ ์ ๊ฐ๋ฐํ ๊ฒ์ด ๋ฆฌ์กํธ(React) ์ ๋๋ค.
๋ฆฌ์กํธ์ ์ดํด
๋ฆฌ์กํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋๋ ๋ฐ ์ฌ์ฉํฉ๋๋ค. ๊ด๋ฆฌ ๊ตฌ์กฐ๊ฐ MVC, MVW ๋ฑ์ธ ํ๋ ์์ํฌ์ ๋ฌ๋ฆฌ ์ค์ง V(View)๋ง ์ ๊ฒฝ ์ฐ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ๋๋ค.
๋ฆฌ์กํธ์์๋ ํน์ ๋ถ๋ถ์ด ์ด๋ป๊ฒ ์๊ธธ์ง ์ ํ๋ ์ ์ธ์ฒด๊ฐ ์๋๋ฐ ์ด๋ฅผ ์ปดํฌ๋ํธ(component) ๋ผ๊ณ ํฉ๋๋ค. ์ปดํฌ๋ํธ๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ API ๋ก ์๋ง์ ๊ธฐ๋ฅ๋ค์ ๋ด์ฅํ๊ณ ์์ผ๋ฉฐ ์ปดํฌ๋ํธ ํ๋์์ ์ปดํฌ๋ํธ์ ์๊น์์ ์๋ ๋ฐฉ์์ ์ ์ํ์ฌ ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค.
๋ํ ์ฌ์ฉ์ ํ๋ฉด์ ๋ทฐ๋ฅผ ๋ณด์ฌ ์ฃผ๋ ๊ฒ์ ๋ ๋๋ง์ด๋ผ๊ณ ํฉ๋๋ค.
๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ทฐ๋ฅผ ์ด๋ป๊ฒ ๋ ๋๋งํ๊ธธ๋ ๋ฐ์ดํฐ๊ฐ ๋ณํ ๋๋ง๋ค ์๋กญ๊ฒ ๋ฆฌ๋ ๋๋ง ํ๋ฉด์ ์ฑ๋ฅ์ ์๋ผ๊ณ , ์ต์ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณต ํ ์ ์์๊น์? ์ด๋ฅผ ์ดํดํ๋ ค๋ฉด '์ด๊ธฐ๋ ๋๋ง'๊ณผ '๋ฆฌ๋ ๋๋ง' ๊ฐ๋ ์ ์ดํดํด์ผ ํฉ๋๋ค.
1) ์ด๊ธฐ ๋ ๋๋ง
์ปดํฌ๋ํธ์ render ํจ์๋ฅผ ํตํ์ฌ ๋ ๋๋ง์ด ์ด๋ฃจ์ด์ง๊ฒ ๋ฉ๋๋ค. ๋ ๋ํจ์๋ ๋ทฐ๊ฐ ์ด๋ป๊ฒ ์๊ฒผ๊ณ ์ด๋ป๊ฒ ์๋ํ๋์ง์ ๋ํ ์ ๋ณด๋ฅผ ์ง๋ ๊ฐ์ฒด๋ฅผ ๋ฐํํฉ๋๋ค. render ํจ์๊ฐ ์คํํ๋ฉด ๋ ๋๋ง์ด ์ด๋ฃจ์ด์ง๊ณ HTML ๋งํฌ์ (markup) ์ ๋ง๋ค๊ณ ์ด๋ฅผ DOM ์์ ์์ ์ฃผ์ ํ๋ ์์ ์ด ์ด๋ฃจ์ด ์ง๊ฒ ๋ฉ๋๋ค.
2) ๋ฆฌ๋ ๋๋ง(์กฐํ ๊ณผ์ )
๋ทฐ๋ฅผ ์ ๋ฐ์ดํธ ํ ์ ์ "์ ๋ฐ์ดํธ ๊ณผ์ ์ ๊ฑฐ์น๋ค" ๋ผ๊ณ ํ๊ธฐ๋ณด๋ค "์กฐํ ๊ณผ์ ์ ๊ฑฐ์น๋ค" ๋ผ๊ณ ํ๋ ๊ฒ์ด ๋ ์ ํํ ํํ์ ๋๋ค. ์ด์ ๋ ์๋ก์ด DOM ์์๋ก ๊ฐ์ ๋ผ์ฐ๊ธฐ ๋๋ฌธ์ ๋๋ค.
๋ฆฌ์กํธ๋ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋๋ฉด render ํจ์๊ฐ ๋ฐํํ๋ ๊ฒฐ๊ณผ๋ฅผ ๊ณง๋ฐ๋ก DOM ์ ๋ฐ์ํ์ง ์๊ณ , ์ด์ ์ render ํจ์๊ฐ ๋ง๋ค์๋ ์ปดํฌ๋ํธ ์ ๋ณด์ ํ์ฌ render ํจ์๊ฐ ๋ง๋ ์ปดํฌ๋ํธ ์ ๋ณด๋ฅผ ๋น๊ตํํ DOM ํธ๋ฆฌ๋ฅผ ์ ๋ฐ์ดํธ ํ๊ฒ ๋ฉ๋๋ค.
๋ฆฌ์กํธ์ ํน์ง
๋ฆฌ์กํธ์ ์ฃผ์ ํน์ง ์ค ํ๋๋ Virtual DOM์ ์ฌ์ฉํ๋ ๊ฒ
์ฐ์ DOM ์ด ๋ฌด์์ธ์ง ๋ถํฐ ์์๋ณด๋ฉด.. DOM ์ด๋ ๋ฌธ์๊ฐ์ฒด ๋ชจ๋ธ(Document Object Model)์ ์ฝ์ด์ ๋๋ค. ์น ๋ธ๋ผ์ฐ์ ๋ DOM ์ ํ์ฉํ์ฌ ๊ฐ์ฒด์ ์๋ฐ์คํฌ๋ฆฝํธ์ CSS ๋ฅผ ์ ์ฉํ ์ ์์ต๋๋ค. DOM ์ ํธ๋ฆฌํํ๋ก ๊ตฌ์ฑ๋์ด ์๋๋ฐ DOM ์ ํตํด์ ํน์ ๋ ธ๋๋ฅผ ์ฐพ๊ฑฐ๋ ์์ ํ๊ฑฐ๋ ์ ๊ฑฐํ๊ฑฐ๋ ์ํ๋ ๊ณณ์ ์ฝ์ ํ ์ ์๋ค.
DOM ์ ๊ณผ์ฐ ๋๋ฆด๊น?
DOM ์๋ ์น๋ช ์ ์ธ ํ ๊ฐ์ง ๋ฌธ์ ์ ์ด ์์ต๋๋ค. ๋ฐ๋ก ๋์ UI์ ์ต์ ํ๋์ด ์์ง ์๋ค๋ ๊ฒ์ ๋๋ค.
"์์ฆ์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋งค์ฐ ๋น ๋ฅธ ๋ฐ๋ฉด, DOM ์ ๋๋ฆฌ๋ค?" ๋ผ๊ณ ํ๋๋ฐ ์ด๋ ์ ํํ ๋ง์ด ์๋๋๋ค.
DOM ์์ฒด๋ ๋น ๋ฆ ๋๋ค. ๋จ ์น ๋ธ๋ผ์ฐ์ ๋จ์์ DOM ์ ๋ณํ๊ฐ ์ผ์ด๋๋ฉด ์น๋ธ๋ผ์ฐ์ ๊ฐ CSS๋ฅผ ๋ค์ ์ฐ์ฐํ๊ณ , ๋ ์ด์์์ ๊ตฌ์ฑํ๊ณ , ํ์ด์ง๋ฅผ ๋ฆฌํ์ธํธํ๊ฒ๋๋๋ฐ ์ด ๊ณผ์ ์์ ์๊ฐ์ด ํ๋น๋๋ ๊ฒ์ ๋๋ค. ์ด์ ๋ํ ํด๊ฒฐ๋ฒ์ผ๋ก DOM์ ์ต์ํ์ผ๋ก ์กฐ์ํ์ฌ ์์ ์ ์ฒ๋ฆฌํ๋ ๋ฐฉ์์ผ๋ก ๊ฐ์ ํ ์ ์์ต๋๋ค.
Virtual DOM
๋ฆฌ์กํธ๋ Virtual DOM ๋ฐฉ์์ ์ฌ์ฉํ์ฌ DOM ์ ๋ฐ์ดํธ๋ฅผ ์ถ์ํํจ์ผ๋ก์จ DOM ์ฒ๋ฆฌ ํ์๋ฅผ ์ต์ํํ๊ณ ํจ์จ์ ์ผ๋ก ์ ๋ฐ์ดํธ๋ฅผ ์งํํ ์ ์์ต๋๋ค. Virtual DOM ์ ์ฌ์ฉํ๋ฉด ์ค์ DOM์ ์ ๊ทผํ์ฌ ์กฐ์ํ๋ ๋์ , ์ด๋ฅผ ์ถ์ํํ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด๋ฅผ ๊ตฌ์ฑํ์ฌ ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค. ์ด๋ ๋ง์น ์ค์ DOM์ ๊ฐ๋ฒผ์ด ์ฌ๋ณธ๊ณผ ๋น์ทํฉ๋๋ค..
๋ฆฌ์กํธ์์ ์ค์ DOM์ ์ ๋ฐ์ดํธ ํ ๋ ์ธ๊ฐ์ง ์ ์ฐจ๋ฅผ ๋ฐ๊ฒ ๋๋๋ฐ ์ดํด๋ณด๋ฉด..
1. ๋ฐ์ดํฐ๋ฅผ ์ ๋ฐ์ดํธํ๋ฉด ์ ์ฒด UI๋ฅผ Virtual DOM์ ๋ฆฌ๋ ๋๋ง ํ๋ค.
2. ์ด์ Virtual DOM์ ์๋ ๋ด์ฉ๊ณผ ํ์ฌ ๋ด์ฉ์ ๋น๊ตํ๋ค.
3. ๋ฐ๋ ๋ถ๋ถ๋ง ์ค์ DOM์ ์ ์ฉํ๋ค.
์ด์ฒ๋ผ ๋ฆฌ์กํธ๋ Virtual DOM ์ ํตํด์ ๋์ UI ์ต์ ํ ๋ฌธ์ ๋ฅผ๊ฐ์ง๊ณ ์๋ DOM ์ ๋ฐ์ดํธ ๋ฐฉ์์ ๋ณด์ํ๊ธฐ ๋๋ฌธ์ ํจ์จ์ ์ผ๋ก ์์ ์ ์งํ ํ ์ ์์ต๋๋ค.
๋ํ ์ผ๋ถ ์น ํ๋ ์์ํฌ๊ฐ MVC, MVW ๋ฑ์ ๊ตฌ์กฐ๋ฅผ ์งํฅํ๋ ๊ฒ๊ณผ ๋ฌ๋ฆฌ ๋ฆฌ์ ํธ๋ ์ค์ง ๋ทฐ๋ง ๋ด๋นํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ก์ ์ทจํฅ๋๋ก ์คํ์ ์ค์ ํ ์ ์๋ค๋ ์ฅ์ ์ ๊ฐ์ง๊ณ ์์ง๋ง ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ํด์ผ ํ๋ค๋ ๋จ์ ์ ๊ฐ์ง๊ณ ์๊ธฐ๋ ํฉ๋๋ค.
'๐ป ํ๋ก๊ทธ๋๋ฐ > ๐ React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋์ ๋ผ์ฐํ ์ฌ์ฉ ํ์ด์ง ๋ชจ๋ ๊ด๋ฆฌ (0) | 2023.08.20 |
---|---|
React Router ์์ Navigate ํจ์๋ฅผ ํ์ฅํ์ฌ ์ฌ์ฉํ๊ธฐ (0) | 2023.08.17 |
React ํ๋ก์ ํธ์ sass ์ฐ๊ฒฐ์ Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0. ์๋ฌ ํด๊ฒฐ (0) | 2021.07.18 |
React Router, a ํ๊ทธ (0) | 2021.07.17 |
Create React App, Webpack (0) | 2021.07.16 |