๋ฒ์จ ํญํด 2์ฃผ์ฐจ! ํ๋ฃจ๊ฐ ๋ค๋ฅด๊ฒ ๋ง์ด ๋ฐฐ์ฐ๊ณ ์์ง๋ง, ๊ทธ ๋ณด๋ค ๋ชจ๋ฅด๋ ๊ฒ์ด ๋ ๋ง์ด ์๊ฒจ๋ฒ๋ ธ๋ค. ์ค๊ฐ์ ๋ ์ฐํด๋ก ๋์จํด์ง ๋์๊ฒ ์ฃผํน๊ธฐ ๊ธฐ๋ณธ์ฃผ์ฐจ๋ ๊ฝค๋ ํ๋ค๊ฒ ๋ค๊ฐ์๋ค. React๋ฅผ ํญํด์ ์์์ผ ์ฒ์ ์ ํ๊ธฐ ๋๋ฌธ์ ํ๋ค์๋ ์ ๋ ์์ง๋ง ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ ๋์ฑ ์ฒด๊ฐ๋ ์ด๋ ค์์ด ์๋ค. ๋ฐ๋ก JavaScript ์๋ จ๋ ๋ถ์กฑ์ด๋ค. ์ด ๋๋ฌธ์ React์ ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋ฅ๋ค์ ์ตํ๋ณด๋ 2์ฃผ์ฐจ ๊ฐ์์์๋ถํฐ ์ด๋ ค์์ ๊ฒช์๋ค. 1์ฃผ์ฐจ์์ ๊ฐ๋ตํ๊ฒ ๊ธฐ๋ณธ์ ์ผ๋ก ์๊ณ ์์ด์ผ ํ JavaScript ๋ฌธ๋ฒ๋ค์ ๋ฐฐ์ ์ง๋ง ์๊ฐ์ ์ซ๊ธฐ๋ค๋ณด๋ ์ ๋๋ก ์์งํ์ง ๋ชปํ ์ฑ 2์ฃผ์ฐจ๋ก ๋์ด๊ฐ๊ณ , ์ด๋ ดํ์ด ์๋ฆฌ ์ก์ JavaScript ์ง์์ผ๋ก๋ React์ ๊ธฐ๋ณธ์ ์ธ ํ๋ฆ ๋ง์ ์ดํดํ๊ธฐ ๋ฒ ์ฐผ๋ค. ์ผ๋จ ๊ฐ์ธ ํ๋ก์ ํธ ์์ฑ์ ์ํด Skimming ย ํ๋ฏ์ด ์๊ฐ์ ์ด์ด๋๊ฐ์ผ๋ ์ดํด๊ฐ ๋์ง ์์ ์ํ์์ ์ฝ๋๋ง ๋ฐ๋ผ ์ธ ๋ฟ์ด์๋ค. ๊ฐ์๋ฅผ ๋ฐ๋ณตํด์ ๋ฃ๋ ํ์ ์ง๋๊ฐ ์ฝ์ฌ๋ฆฌ ๋๊ฐ์ง ์์ ์ ์ ๋ถ์ํด์ง๋ ์์ค์ ํ์ ๋ถ๋ค์ ์กฐ์ธ์ด ๋์์ด ๋๋ค. ๋๋ฌด ์กฐ๊ธํดํ์ง ์์๋ ๋๋ค. ์ผ๋จ ๊ธฐ๋ฅ ๊ตฌํ์ ํ์จ๋ณด์. ํญํด์ ๋ค์ด์ค๊ธธ ์ํ๋ค๋ ์๊ฐ์ด ๋๋ ์๊ฐ์ด์๋ค. ์ผ๋จ ์ง๊ธ ๋ฐฐ์ฐ๋ ๊ฒ์ ๋จผ์ ์ต์ํด์ง์๋ ๋ง์๊ฐ์ง๊ณผ ํจ๊ป React ์ฝ๋๋ฅผ ์จ๋ด๋ ค๊ฐ๋ค. ๊ทธ๋ ๊ฒ ๊ณต๋ถํ๋ React๋ฅผ ์ด๋ฒ์ฃผ WIL ํค์๋์ ํจ๊ป ์ ๋ฆฌํด๋ณด๋ ค ํ๋ค.
HTML์ ๊ฐ์ข ํ๊ทธ๋ก ์ด๋ฃจ์ด์ ธ ์๋๋ฐ, ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(DOM)์ 'head', 'body' ๊ทธ๋ฆฌ๊ณ 'div' ์ ๊ฐ์ ํ๊ทธ๋ค์ ๊ฐ๊ฐ์ ๊ฐ์ฒด๋ก ๋ณธ๋ค. ๊ฐ ๊ฐ์ฒด๋ค์ ์๋์ฒ๋ผ ํ ์คํธ ๋ ธ๋, ์์ ๋ ธ๋ ๋ฑ๋ฑ ํ์ ๊ฐ๋ค์ ๊ฐ์ง๊ณ ์๊ณ ,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>ํ
์คํธ</p>
</div>
</body>
</html>
์ด๋ฌํ ๊ตฌ์กฐ๋ฅผ ํธ๋ฆฌ ๊ตฌ์กฐ๋ผ๊ณ ํ๋ค.
React๋ html ํ์ผ์ด ํ๋๋ง ์กด์ฌํ๋ค. ์ด๋ฅผ SPA(Single Page Application)๋ผ ํ๋๋ฐ, SPA์์๋ ์ฌ์ดํธ์ ๋ณํ๊ฐ ์ผ์ด๋ ๋ ๋ง๋ค DOM์ ์กฐ์์ด ์ฆ์์ง ์ ๋ฐ์ ์๋ค. ์ด๋ ์์ฐ์ค๋ฝ๊ฒ ๋ธ๋ผ์ฐ์ ์ ์ฐ์ฐ ์ฆ๊ฐ๋ก ์ด์ด์ง๊ณ ์น ๊ตฌ๋์ ๋นํจ์จ์ ์ด๊ฒ ๋ง๋ ๋ค. ๊ทธ๋์ React์์๋ Virtual DOM - ๊ฐ์ DOM์ด ์ฐ์ธ๋ค. ๊ฐ์ DOM์ ์ฌ์ฉํ๋ฉด ๋ทฐ ๋จ์ ๋ณํ๊ฐ ์๊ธธ ๋ ์ด๋ฅผ ์ค์ DOM์ ์ ์ฉํ๊ธฐ ์ ์ ๊ฐ์ DOM์ ๋จผ์ ์ ์ฉํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ต์ข ์ ์ผ๋ก ๋ณํ ๊ฒฐ๊ณผ๋ง ์ค์ DOM์ ์ ์ฉ์ํจ๋ค. ์ด๋ฅผ ํตํด ํด๋ผ์ด์ธํธ์์ ์ด๋ค์ง๋ ์ฐ์ฐ์ ์์ ์ค์ด๊ณ ์ฑ๋ฅ์ ํฅ์์ํฌ ์๊ฐ ์๋ค.
์ฌ๊ธฐ์ ํ๋์ ์๋ฌธ์ ์ด ์๊ธฐ๋๋ฐ, ์ด์จ๋ ๊ฐ์ DOM์ ๋น๊ตํ๋ ๊ณผ์ ์ด ํ์ํ๊ณ , ์ด ๋ํ ์ถ๊ฐ์ ์ธ ์ฐ์ฐ์์๋ ๋ค๋ฆ์ด ์์ง ์๋๋ ๊ฒ์ด๋ค. ํ์ง๋ง ์ค์ DOM ์ง์ ์กฐ์ํ๋ ๊ณผ์ ์ ๋จผ์ ๋ค์ฌ๋ค๋ณด๋ฉด ์ ๊ฐ์ DOM์ ์ฌ์ฉํ๋ ๊ฒ์ด ํจ์จ์ ์ธ์ง ์ ์ ์๋ค. ์ผ๋จ ๋ธ๋ผ์ฐ์ ์ ์๋ ๊ณผ์ ์ ์ดํด๋ณด์. HTML์ ์ ๋ฌ ๋ฐ์ ๋ธ๋ผ์ฐ์ ๋ ๋ ๋๋ง์ ํ๊ณ , ๋ ์ด์์์ ๋ง๋ค์ด ํ์ด์ง๋ฅผ ๊ทธ๋ฆฌ๋ ๊ณผ์ ์ ์ํํ๋ค. ์ค์ DOM์ ๊ฐ์ฒด ์ฌ๋ฌ ๊ฐ๋ฅผ ํ๋์ฉ ์กฐ์ํ๋ค๊ณ ๊ฐ์ ํ๋ฉด, ์์ ๋งํ๋ ๋ ๋๋ง - ๋ ์ด์์ - ๊ทธ๋ฆฌ๊ธฐ ์ ๊ฐ์ ๊ณผ์ ์ ์ฌ๋ฌ๋ฒ ๋ฐ๋ณตํด์ผํ๋ค. ๋ชจ๋ ๋ณํ๊ฐ ์ผ์ด๋ ๋ ๋ง๋ค ์ผ์ผํ ์ฌ์์ ์ด ์งํ๋๋ค๋ฉด ์ฐ์ฐ ์๋๋ ๋๋ ค์ง ์ ๋ฐ์ ์๋ค. ๊ฐ์ DOM์ ์ด๋ฌํ ์ฐ์ฐ ํ์์ ์ธก๋ฉด์์ ์ ๋ฆฌํ๋ค. ๋ณํ๋ ๋ชจ๋ ๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ๊ณผ์ ์ด ํ์์๋ ๊ฐ์์ DOM์ ๋จผ์ ์ ์ฉ์ํค๊ณ ์ด๋ฅผ ํ ๋ฒ์ ์ ์ฉํ์ฌ ์ค์ DOM์ ํ ๋ฒ๋ง ์กฐ์ํ๋ ๊ฒ ๋ง์ผ๋ก ์ผ๋ จ์ ๊ณผ์ ์ ์ํํ ์ ์๋ค. ์ถ๊ฐ์ ์ผ๋ก ๊ฐ์ DOM์ ๋ณํ๋ ๋ถ๋ถ์ด ์ด๋์์ ์ด๋ป๊ฒ ๋ณํ๋์ง๋ ์๋์ ์ผ๋ก ๊ด๋ฆฌํด์ฃผ๊ธฐ ๋๋ฌธ์ ์ฐ๋ฆฌ๊ฐ ๋ณํ๋ฅผ ์ผ์ผํ ์๋์ผ๋ก ํ์ ํ๊ณ ์ ์ฉํ ํ์๊ฐ ์์ด ๋๊ธฐํ ์์ ์ ์ธก๋ฉด์์๋ ํจ์จ์ ์ด๋ค.
์๋ฒ๋ฆฌ์ค๋ ์๋ฒ๊ฐ ์๋ค๋ ์ด์ผ๊ธฐ๊ฐ ์๋๋ผ ์๋ฒ๋ฅผ ์ผ์ผํ ๊ด๋ฆฌํ๊ณ ์ ๊ฒฝ ์ธ ํ์๊ฐ ์๋ค๋ ์๋ฏธ์ด๋ค. ์ฌ์ค ์๋ฒ๋ฆฌ์ค์ ๊ดํ ๋ด์ฉ์ ์์ง 4์ฃผ์ฐจ์ ๊ฐ์ ๋ด์ฉ์ ๊น๊ฒ ์ดํดํ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ ์์ธํ ์ค๋ช ์ ๋ถ์ด๊ธฐ๊ฐ ์ด๋ ต๋ค.