[๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ] 1์ฅ - ๋ฆฌ์กํธ ์์
์ด ๊ธ์ ๊น๋ฏผ์ค(velopert)๋์ ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ์์ฐธ์กฐํ์ฌ ์์ฑํ ๊ธ์ ๋๋ค.
#
์ ๋ฆฌ์กํธ(React)์ธ๊ฐ?JS๋ง์ผ๋ก ๊ท๋ชจ๊ฐ ํฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋ ์๋์ด๋ค.
๊ท๋ชจ๊ฐ ํฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ด๋ฆฌํ๊ธฐ ์ํด ๋ง๋ค์ด์ง ์๋ง์ ํ๋ ์์ํฌ๋ค์ด ์๋ค. ์ดํ๋ ์์ํฌ๋ค์ ์ฃผ๋ก MVC(Model-View-Controller), MVVM(Model-View-View Model) ์ํคํ ์ฒ๋ฅผ ์ฌ์ฉํ๋ค.
๋ชจ๋ธ(Model) : ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉํ๋ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๋ ์์ญ
๋ทฐ(View) : ์ฌ์ฉ์์๊ฒ ๋ณด์ด๋ ๋ถ๋ถ
์ปจํธ๋กค๋ฌ(Controller) : ์ฌ์ฉ์์ ์ ๋ ฅ์ด๋ ์กฐ์์ ๋ฐ๋ผ ๋ชจ๋ธ ๋ฐ์ดํฐ๋ฅผ ์กฐํ, ์์ ํ๊ณ ๋ณ๊ฒฝ์ฌํญ์ ๋ทฐ์ ๋ฐ์ํจ.
๐ ๋ฆฌ์กํธ๋ ์ค์ง ๋ทฐ(View)๋ง์ ์ ๊ฒฝ์ฐ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.
์ด๋ค ๋ฐ์ดํฐ๊ฐ ๋ณํ ๋๋ง๋ค ์ด๋ค ๋ณํ๋ฅผ ์ค์ง ๊ณ ๋ฏผํ๋ ๊ฒ์ด ์๋๋ผ ๊ทธ๋ฅ ๊ธฐ์กด ๋ทฐ๋ฅผ๋ ๋ ค๋ฒ๋ฆฌ๊ณ ์ฒ์๋ถํฐ ์๋ก ๋ ๋๋งํ๋ ๋ฐฉ์
#
๋ฆฌ์กํธ ์ดํด๋ฆฌ์กํธ๋ ํน์ ๋ถ๋ถ์ด ์ด๋ป๊ฒ ์๊ธธ์ง ์ ํ๋ ์ ์ธ์ฒด์ธ ์ปดํฌ๋ํธ(Component) ๋จ์๋ก ํ๋ก์ ํธ๋ฅผ ๊ด๋ฆฌํ๋ค. ์ปดํฌ๋ํธ๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ API๋ก, ์๋ง์ ๊ธฐ๋ฅ๋ค์ ๋ด์ฅํ๊ณ ์์ผ๋ฉฐ ์๊น์์ ์๋ ๋ฐฉ์์ ์ ์ํ๋ค.
์ฌ์ฉ์ ํ๋ฉด์ ๋ทฐ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ๋ ๋๋ง์ด๋ผ๊ณ ํ๋๋ฐ, ์ต์ด๋ก ์คํํ '์ด๊ธฐ ๋ ๋๋ง '๊ณผ ๋ฐ์ดํฐ ๋ณ๊ฒฝ์ผ๋ก ๋ค์ ์คํ๋๋ '๋ฆฌ๋ ๋๋ง'์ด ์๋ค.
#
์ด๊ธฐ ๋ ๋๋ง์ด๊ธฐ ๋ ๋๋ง์ ๋งจ ์ฒ์ ์ด๋ป๊ฒ ๋ณด์ผ์ง๋ฅผ ์ ํ๋ค. ๋ฆฌ์กํธ์์๋ ์ด๋ฅผ render()
ํจ์๋ก ๋ค๋ฃฌ๋ค. ์ด ํจ์๋ ์ปดํฌ๋ํธ์ ๋ทฐ๊ฐ ์ด๋ป๊ฒ ์๊ฒผ๊ณ ์ด๋ป๊ฒ ์๋ํ๋์ง์ ๋ํ ์ ๋ณด๋ฅผ ๊ฐ์ง ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค.
render
ํจ์๋ฅผ ์คํํ๋ฉด
๋ด๋ถ์ ์๋ ์ปดํฌ๋ํธ๋ค๋ ์ฌ๊ท์ ์ผ๋ก ๋ ๋๋งํ๊ณ
๋ ๋๋ง์ด ๋๋๋ฉด ์ง๋๊ณ ์๋ ์ ๋ณด๋ค์ ์ฌ์ฉํ์ฌ HTML ๋งํฌ์ ์ ๋ง๋ค๊ณ
์ค์ ํ์ด์ง์ DOM ์์ ์์ ์ฃผ์ ํ๋ค.
#
์กฐํ ๊ณผ์ ๋ฆฌ์กํธ์์ ๋ทฐ๋ฅผ ์ ๋ฐ์ดํธ ํ๋ ๊ฒ์ "์กฐํ ๊ณผ์ ์ ๊ฑฐ์น๋ค"๊ณ ํ ์ ์๋ค. ๋ณํ์๋ฐ๋ผ ๋ทฐ๊ฐ ๋ณํ๋๋ ๊ฒ์ด ์๋๋ผ ์๋ก์ด ์์๋ก ๊ฐ์ ๋ผ์ฐ๊ธฐ ๋๋ฌธ์ด๋ค.
์ปดํฌ๋ํธ๋ ๋ฐ์ดํฐ๋ฅผ ์
๋ฐ์ดํธ ํ์ ๋ ์
๋ฐ์ดํธํ ๊ฐ์ ์์ ํ๋ ๊ฒ์ด ์๋๋ผ ์๋ก์ด๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ณ render
ํจ์๋ฅผ ๋ค์ ํธ์ถํ๋ค.
์ด ๋, render
ํจ์๊ฐ ๋ฐํํ๋ ๊ฒฐ๊ณผ๋ฅผ ๊ณง๋ฐ๋ก DOM์ ๋ฐ์ํ๋ ๊ฒ์ด ์๋๋ผ ์ด์ ์ปดํฌ๋ํธ ์ ๋ณด์ ํ์ฌ render
ํจ์๊ฐ ๋ง๋ ์ปดํฌ๋ํธ ์ ๋ณด๋ฅผ ๋น๊ตํ์ฌ, ์ต์ํ์ ์ฐ์ฐ์ผ๋ก ๋์ ์ฐจ์ด๋ฅผ ์์๋ด๊ณ , DOM ํธ๋ฆฌ๋ฅผ ์
๋ฐ์ดํธ ํ๋ค.
์ด๋ฌํ ๋ฐฉ์์ผ๋ก ์ต๋ํ ์ฑ๋ฅ์ ์๋ผ๊ณ , ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ธฐ ์ํด ๋ง๋ ๊ฒ์ด ๋ฆฌ์กํธ์ด๋ค.
#
๋ฆฌ์กํธ์ ํน์ง#
Virtual DOM๋ฆฌ์กํธ์ ์ฃผ์ ํน์ง์ Virtual DOM์ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค.
#
DOM์ด๋?DOM์ Document Object Model์ ์ฝ์ด. ๊ฐ์ฒด๋ก ๋ฌธ์ ๊ตฌ์กฐ๋ฅผ ํํํ๋ ๋ฐฉ๋ฒ์ผ๋ก HTML์ด๋ XML๋ก ์์ฑํ๋ค.
์น ๋ธ๋ผ์ฐ์ ๋ DOM์ ํ์ฉํ์ฌ ๊ฐ์ฒด์ JS์ CSS๋ฅผ ์ ์ฉํ๋ค. DOM์ ํธ๋ฆฌ ํํ๋ก, ํน์ ๋ ธ๋๋ฅผ ์ฐพ๊ฑฐ๋ ์์ ํ๊ฑฐ๋ ์ ๊ฑฐํ๊ฑฐ๋ ์ํ๋ ๊ณณ์ ์ฝ์ ํ ์ ์๋ค.
DOM์ ๋จ์ ์ ๋์ UI์ ์ต์ ํ๋์ด ์์ง ์๋ค๋ ๊ฒ์ด๋ค. ํ์ด์ค๋ถ์์ ์คํฌ๋กค๋ฐ๋ฅผ ๋ด๋ ธ์ ๋ ์๋ง์ ๋ฐ์ดํฐ๊ฐ ๋ก๋ฉ๋๋ ๊ฒ์ ์๊ฐํด๋ณด์. (ํ์ด์ค๋ถ์์ ํฌ์คํธ ํ ๊ฐ์์์ฉ๋๋ <div>
์์์ ์๋ ์ฝ 100๊ฐ์ด๋ค.)
์ด์ฒ๋ผ DOM์ ๋ณํ๊ฐ ์ผ์ด๋ ๋ ์น ๋ธ๋ผ์ฐ์ ๋ CSS๋ฅผ ๋ค์ ์ฐ์ฐํ๊ณ ๋ ์ด์์์ ๊ตฌ์ฑํ๊ณ , ํ์ด์ง๋ฅผ ๋ฆฌํ์ธํธํด์ผ ํ๊ธฐ ๋๋ฌธ์ DOM์ ์ต์ํ์ผ๋ก ์กฐ์ํด์ผ ์ฑ๋ฅ ์ด์๋ฅผ ๋ง์ ์ ์๋ค.
#
Virtual DOM๋ฆฌ์กํธ๋ Virtual DOM ์ฆ ์ค์ DOM์ ์ง์ ์ ๊ทผํ์ฌ ์กฐ์ํ๋ ๋์ ์ด๋ฅผ ์ถ์ํํ JS ๊ฐ์ฒด๋ฅผ ๊ตฌ์ฑํ์ฌ ์ฌ์ฉํ๋ค. (์ค์ DOM์ ๊ฐ๋ฒผ์ด ์ฌ๋ณธ์ด๋ผ ํ ์ ์๋ค!)
๋ฆฌ์กํธ์์๋ ๋ฐ์ดํฐ๊ฐ ๋ณํด DOM์ ์ ๋ฐ์ดํธํ ๋๋ ๋ค์์ ์ ์ฐจ๋ฅผ ๋ฐ๋๋ค.
๋ฐ์ดํฐ๋ฅผ ์ ๋ฐ์ดํธํ๋ฉด ์ ์ฒด UI๋ฅผ Virtual DOM์ ๋ฆฌ๋ ๋๋งํ๋ค.
Virtual DOM์ ์๋ ๋ด์ฉ๊ณผ ํ์ฌ ๋ด์ฉ์ ๋น๊ตํ๋ค.
๋ฐ๋ ๋ถ๋ถ๋ง ์ค์ DOM์ ์ ์ฉํ๋ค.
๋ฆฌ์กํธ์ Virtual DOM ๋ฐฉ์์ด ๋ฌด์กฐ๊ฑด ๋น ๋ฅธ ๊ฒ์ด ์๋๋ค. ๋ค์์ ๋ฆฌ์กํธ ๋ฉ๋ด์ผ์ ์๋๋ฌธ์ฅ์ด๋ค.
๐ ์ง์์ ์ผ๋ก ๋ฐ์ดํฐ๊ฐ ๋ณํํ๋ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถํ๊ธฐ
Virtual DOM์ด ์ ๊ณตํ ์ ์๋ ๊ฒ์ ์ ๋ฐ์ดํธ ์ฒ๋ฆฌ ๊ฐ๊ฒฐ์ฑ์ด๋ค.
#
๊ธฐํ ํน์ง๋ฆฌ์กํธ๋ ํ๋ ์์ํฌ๊ฐ ์๋๋ผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ. (Vue.js, Angular.js๋ ํ๋ ์์ํฌ) ๋ฐ๋ผ์ Ajax, ๋ฐ์ดํฐ ๋ชจ๋ธ๋ง, ๋ผ์ฐํ ๋ฑ์ ๊ธฐ๋ฅ์ ์ง์ ๊ตฌํํ๊ฑฐ๋ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ๋ค๋ฅธ ์น ํ๋ ์์ํฌ์ ํผ์ฉํด์ ์ฌ์ฉํด์ผ ํ๋ค.
#
๊ฐ์ด ์ฝ๊ธฐVirtual DOM๊ณผ Internals - React