์๋๋ ๋ ๋ฒจ2๋ ํ
์ฝํก์ ํ ์๊ฐ์ ์๋์๋ค.
์ด ์ข๊ฒ ์์ด ํํ ์์
์ ์ฐธ์ฌํ ์ ์๊ฒ ๋์๋ค. ๋ ๋ฒจ1์ ๋๋ด๋ฉด์ ํ๊ณ ์ถ์ ๊ณต๋ถ๋ค์ด ์๊ฒจ์ ์คํฐ๋๋ฅผ ์งํํ ์์ ์ด์๋ค. ์์ผ๋ก ํด์ผํ ๊ฒ๋ค์ด ๋ณด์ด๋๊น ํ์J์ธ ๋๋ '์ง๊ธ ์๋๋ฉด ํ
์ฝํก ๋ชปํ๊ฒ ๋ค!! ํ๋๋ผ๊ณ ๋๋ฌด ๋ฐ์ ๊ฒ ๊ฐ์!'๋ผ๋ ์๊ฐ์ ํ๊ฒ ๋์๋ค. ๊ทธ๋ฆฌ๊ณ ํ
์ฝํก ์ ์ฒญ ๊ณต์ง๊ฐ ๋์ค๊ณ ํ
์ฝํก์ด ์์๊น์ง์ ์๊ฐ์ด ๊ฝค ์์ด์ ์ค๋นํ ์๊ฐ๋ ์ถฉ๋ถํ ๊ฒ ๊ฐ์๋ค. ๊ทธ๋์ ๊ณต์ง๊ฐ ๋ ๊ทธ ๋ ๋ฐค์ ์ถฉ๋์ ์ผ๋ก ํ
์ฝํก์ ์ ์ฒญํ๋ค.
ํ ์ฝํก ์ฃผ์ ๋ createPortal๋ก ์ ํ๋ค. ๋ ธ์ ํด๋ก ์ฝ๋ฉ์ ํ๋ฉด์ ๋ชจ๋ฌ ์ฐฝ์ state๊ด๋ฆฌ๋ก ๊ฝค๋ ๊ณ ์ํ๋ค. ๊ทธ ์ดํ์ createPortal์ ์กด์ฌ๋ฅผ ์๊ฒ ๋์ด ํ ํ๋ก์ ํธ์์ ์ ์ฉํ๊ฒ ์ฌ์ฉํด createPortal์ ์ด์ ์ ์ง์ ๊ฒช์ด๋ดค๋ค. ๊ทธ๋์ ํฌ๋ฃจ๋ค์๊ฒ createPortal์ ๋ํด ์ด์ผ๊ธฐํ ๊ฒ๋ค์ด ์์๊ฑฐ๋ผ๊ณ ์๊ฐํ๋ค.
ํ
์ฝํก์ ์ฒญ์์ธ ํฌ๋ฃจ๋ค์๊ฒ ์๋ฟ๊ณ ์ฌ๋ฏธ์๋ ๋ฐํ๋ฅผ ํ๊ณ ์ถ์๋ค. ๊ทธ๋ฆฌ๊ณ ์ค๋นํ๋ฉด์ ํฌ๋ฃจ๋ค์ด createPortal์ ์ฌ์ฉํ๋๋ฐ ๋ ๋์์ด ๋์์ผ๋ฉด ์ข๊ฒ ๋ค๋ ๋ง์๋ ์๊ฒผ๋ค.
ํ ์ฝํก์ ์ค๋นํ๋ฉด์ ์จ๋ณด๋ฉ์กฐ ํฌ๋ฃจ๋ค์๊ฒ ๋ฐํ ๋ด์ฉ์ ์ค๋ช ํ๋ฉด์,ํฌ๋ฃจ๋ค์ด ๊ถ๊ธํดํ ๊ฒ๋ค์ ๋ํด ๋ฆฌ์์ค๋ฅผ ์ป์ ์ ์์๋ค. ์ฒ์์๋ ์คํฐ๋ ํฌ๋ฃจ๋ค, ๊ทธ ๋ค์์๋ 9๋ช ์ ์จ๋ณด๋ฉ์กฐ ํฌ๋ฃจ๋ค ์์์ ์๋น ํ ์ฝํก์ ์งํํ๋ค. ์ด๋ ๊ฒฝํ์ด ์ง์ง ์ค์ ์ ๋ง์ด ๋์์ด ๋์๋ค. ํฌ๋ฃจ๋ค์ด createPortal์ ์ฝ๋์์ ์ด๋ป๊ฒ ์ฌ์ฉํด ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ์ง ๊ถ๊ธํดํ๋ค๋๊ฒ๋ ์๊ฒ ๋์๊ณ ์ด๋ฅผ ๋ฐํ์ผ๋ก createPortal์ ์ฌ์ฉ ์์์ ๋ํ ๋ด์ฉ๋ค์ ์์ ํ๋ค. ๋ํ createPortal์ ๋ํ ์ง๋ฌธ์ ๋ฐ์์ ์์ ์ง๋ฌธ์ง๋ฅผ ๋ณด์ถฉํด๋๊ฐ ์ ์์๋ค.
ppt,๋๋ณธ์ ์๊ฐ๋ณด๋ค ๋นจ๋ฆฌ ์ค๋นํ๋ค. ๊ทธ๋ฌ๋ ๋ณต๋ณ์ '๋งํ๊ธฐ'์๋ค.
๊ธด์ฅํ๋ฉด ๋ง์ด ๋นจ๋ผ์ง๊ณ 10๋ถ์ด๋ผ๋ ์๊ฐ๋์ A4๋ก 4ํ์ด์ง ๋ถ๋์ ๋งํด์ผํ๋ ์ด๊ฒ๋ ๊ฑฑ์ ์ด์๋ค.
์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๊ฑฐ๋ ๊ฒฐ๊ตญ ์ฐ์ต์ด์๋ค.
๋ง์ ์ฒ์ฒํ ํด๋ณด๊ณ , ์จ์ฌ๋ ๊ณณ๋ ๋ง๋ค์ด๋ณด๊ณ ์๊ฐ์ ์ฒดํฌํ๋ฉด์ ์ฐ์ต์ ์งํํ๋ค.
๋คํํ ์ฐ์ต์ ์งํํ๋ฉด์ ๋งํ๋ ๊ฒ ์ฐจ์ธฐ ๋์์ก๋ค.
'๋ด๊ฐ ์ฌ๊ธฐ์ createPortal ์ ์ผ ์ ์์!'
'์ค์ํ๋ฉด ์ด๋! ๋ชฉ์๋ฆฌ ๊ฐ๋ผ์ง๋ฉด ์ด๋!'
๋จ๋ฆฌ๊ฑฐ๋ ๊ฑฑ์ ์ด ๋๋ฉด '๊ทธ ๋ฏ์๋ผ๊ผฌ'(=๊ทธ๊ฒ ๋ญ๋ผ๊ณ !! ๋๋ ํ ์ ์์ด!! ๋ณ๊ฑฐ ์๋!!)๋ผ๋ฉด์ ์ค์ค๋ก ์ต๋ฉด์ ๊ฑด๋ค. ๊ทธ๋ฌ๋ฉด ์ฌ์ ํ ๋จ๋ฆฌ๊ณ ๊ฑฑ์ ๋์ง๋ง ํด๋๊ฐ ์ ์๋ ํ์ด ์๊ธด๋ค. ์ด๋ฒ ํ ์ฝํก์์๋ ์ต๊ณ ์ฌ์งค์ฒ๋ผ ํ ์ฝํก ์ ๋ ๋ถํฐ ์๊ธฐ ์ต๋ฉด์ ๊ฑธ์๋ค.
๋ง์ด ๊ผฌ์ด๊ฑฐ๋ ๋๋ณธ๋๋ก ์งํ๋์ง ์๋๋ผ๋ ์๊ธฐ ์ต๋ฉด ๊ฑธ๋ฉด์ ์ค์ค๋ก์๊ฒ ๋๋์๋ ๋ง์ ๊ธฐ๋์ด ๋นํฉํ์ง ์๊ณ ๋ฐํ๋ฅผ ์ด์ด๋๊ฐ ์ ์์๋ค.
'ํ ์ฝํก์ ๋๋ด๊ณ ๋ญ ๋ฌ๋ผ์ง ๊ฒ ์์๊น? 2๋จ๊ณ ๋ฏธ์ ๊ตฌํํ๋๋ผ ์์ฒญ ๋ฐ์๊ฒ ๋ค.'๋ผ๋ ์๊ฐ๋ง ํ๋๋ฐ, ํ ์ฝํก์ ๋๋ด๋๊น ์ง์ง ๊ธฐ๋ถ์ด ์ข์๋ค. ๊ทธ๋ฅ ๋ญ๋ฅผ ์ํด๋ ๊ณ์ ์์์ด ๋์๊ณ ํ ์ฝํก ํ๊ธฐ๋ฅผ ์ฐ๋ ์ง๊ธ๋ ์ง์ง ํ๋ณตํ๋ค.๐ ๋ฐ์๋ ๋ ๋ฒจ2 ์ํ์์๋ ์ฌ์ ๊ฐ ์ข ์๊ฒผ๊ณ ํ๊ณ ์ถ์๋ ์๊ณ ๋ฆฌ์ฆ ์คํฐ๋๋ ์์ํ๊ฒ ๋์๋ค.
ํ
์ฝํก์ ๋๋ด๊ณ ์์ฌ์ด ์ ๊ณผ ๋ฟ๋ฏํ ์ ์ด ์๋ค.
์์ฌ์ด ์ ์ ์ฌ์ ๋กญ์ง ๋ชปํ๋ค๋ ๊ฒ์ด๋ค.
์ง๋ฌธ์ผ๋ก ๋์ฌ ๋ด์ฉ์ผ๋ก ๋นผ๋์๋ domNode ์๋ฌ ๋์ฒ ๋ฐฉ์์ ์ถ๊ฐํ๋ค๋ฉด ์ด๋จ ๊น ์ถ๊ธฐ๋ ํ๊ณ ,
๊ธด์ฅํด์ ์ด๋ฐ์ ๋ง์ด ๋นจ๋๊ณ ํฌ๋ฃจ๋ค์ ์ง๋ฌธ์ ๋ ์์ธํ ์ด์ผ๊ธฐํ๊ฑฐ๋ ๋ ๋์ ๋๋ต์ ํด์ค ์ ์์ง ์์ ๊น ์ถ์ ์์ฌ์๋ ์๋ค.
๋ฟ๋ฏํ ์ ์ ๋ฐํ๊ฐ ๋๋๊ณ ๋ฐํ๊ฐ ์ข์๋ค๋ ์ฌ๋ฌ๋ง์ ๋ค์๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ ์ค ๊ฐ์ฅ ์ข์๋ ๋ฐ์์ createPortal์ ์ฌ์ฉํ๊ณ ์ถ๋ค๊ฑฐ๋ ๋๋ถ์ ์ ์ฌ์ฉํ๋ค๋ ๋ง์ ๋ค์๋ค๋ ๊ฒ์ด๋ค. ํฌ๋ฃจ๋ค์๊ฒ ๋์์ด ๋์์ผ๋ฉด ํ๋ ๋ฐ๋์ด ์ด๋ฃจ์ด์ก๋ค. ๐
์ด๋ฒ ํ
์ฝํก์ ์งํํ๋ฉด์ ๊ณ์ ์กด์ฌํ๋ ํฌ๋ฃจ๋ค์ด ์ผ๋ง๋ ํฐ ํ์ด ๋๋ ์ง ๋ค์ ํ๋ฒ ๋๊ผ๋ค.
์ค๋นํ ๋ ํ
์ฝํก์ ๋ด๋ฌ๋ผ๋ฉด ๋๊ตฌํ๋ ๊ฑฐ์ ํ์ง ์๊ณ ์ง์งํ๊ฒ ํผ๋๋ฐฑ์ ํด์ฃผ์๋ค. ๊ทธ๋ฆฌ๊ณ ๋น์ผ ๋ง์ด ๋นจ๋ผ์ง๋ ๋์๊ฒ ์์ ํธ๋ฅผ ๋ณด๋ด๋ ํฌ๋ฃจ๋ค์ ๋ณด๋ฉฐ ๊ธด์ฅ๋ ํ๋ ธ๊ณ ๋ฐํ๋ฅผ ์ ํด๋๊ฐ ์ ์์๋ค.
๊ทธ๋ฆฌ๊ณ ๋ฐํ๋ฅผ ํ๋ฉด์ ๋ฐํ๋ฅผ ๋ฃ๋ ํฌ๋ฃจ๋ค์ ๋์ด ๋ค๋ค ๋ฐ์์์ ์๊ฐ๋ณด๋ค ๋ ๋จ๋ ธ๋ ๊ฒ ๊ฐ๋ค.
์ฐํ ์ฝ 6๊ธฐ ํ๋ก ํธ ์๋ ํฌ๋ฃจ๐๐