๐ฉ๐ป๐ป Today I Learned ๐
โญ๋ผ์ดํ ์ฌ์ดํด์ด๋?
๋ผ์ดํ ์ฌ์ดํด์ ์ด์ผ๊ธฐ ํ๊ธฐ ์ ์ ‘๋ฆฌ์กํธ’์ ํน์ง์ ์ธ ๋ถ๋ถ์ ๋จผ์ ์ด์ผ๊ธฐ ํด์ผํฉ๋๋ค. ๋ฆฌ์กํธ๋ ์ปดํฌ๋ํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๋ View ์ค์ฌ์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. html๋จ์ ํ๋ํ๋๋ฅผ ๊ฐ์ฒด๋ก ์๊ฐํ๋ DOM์ ์ฌ๋ฌ๊ฐ์ง ํ์ ๊ฐ์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์ด๊ฑธ ํธ๋ฆฌ ๊ตฌ์กฐ๋ผ๊ณ ํฉ๋๋ค. ์ด ๋ ํธ๋ฆฌ ์ค ํ๋๊ฐ ์์ ๋ ๋๋ง๋ค ๋ชจ๋ DOM์ ๋ค์ง๊ณ ์์ ํ ๊ฑธ ์ฐพ๊ณ ์์ ํ๋ค๋ฉด ๋ถํ์ํ ์ฐ์ฐ๋ค์ด ์์ฒญ ๋ง์ด ์ผ์ด๋ฉ๋๋ค.
๋ฆฌ์กํธ๋ ์ด ๋ถ๋ถ์ ๋ณด์ํ ์ ์๋๋ฐ์. ์ด๊ฒ ๊ฐ์DOM์ด๋ผ๋ ๊ฒ์
๋๋ค. ๊ธฐ์กด DOM๊ณผ ์ด๋ค ํ๋ ํ ์๋ก ์
๋๋ ๋ถ๋ถ์ด ๊ฐ์DOM์ ํํ๋๊ณ ๋ ๊ฐ์ง๋ฅผ ๋น๊ตํด์ ์์ ๋ ๋ถ๋ถ์ ๋ฐ๊ฟ์ค๋๋ค. ๊ทธ๋ฌ๋ฉด ๋ถํ์ํ ์ฐ์ฐ๋ค์ด ์ผ์ด๋ ํ์๊ฐ ์๊ฒ ์ฃ ?
๋ฆฌ์กํธ์์๋ ์ปดํฌ๋ํธ๋ผ ๋ถ๋ฆฌ๋ ๊ฑธ ์ฌ์ฉํด์ ํํํฉ๋๋ค! ์ปดํฌ๋ํธ๋ค๋ผ๋ฆฌ props ๋ผ ๋ถ๋ฆฌ๋ ๋ฐ์ดํฐ ๊ฐ์ ์ฃผ๊ณ ๋ฐ์ผ๋ฉฐ ์ปดํฌ๋ํธ์ ์ฃผ๊ธฐ๋ผ๋ ๊ฒ์ด ์กด์ฌํฉ๋๋ค
์ด ์ฃผ๊ธฐ๋ผ๋ ๊ฒ์ ๋ผ์ดํ ์ฌ์ดํด์ด๋ผ๊ณ ๋งํ๋๋ฐ, ์ปดํฌ๋ํธ์ ์์ฑ(mount)๋๊ณ ์์ (update)๋๊ณ ์ญ์ (unmount)๊น์ง๋ฅผ ์ด์ผ๊ธฐํฉ๋๋ค.
- ์ปดํฌ๋ํธ๋ ์์ฑ๋๊ณ → ์์ (์ ๋ฐ์ดํธ)๋๊ณ → ์ฌ๋ผ์ง๋๋ค.
- ์์ฑ์ ์ฒ์์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ค๋ ๋จ๊ณ์ ๋๋ค.
- ์์ (์
๋ฐ์ดํธ)๋ ์ฌ์ฉ์์ ํ๋(ํด๋ฆญ, ๋ฐ์ดํฐ ์
๋ ฅ ๋ฑ)์ผ๋ก ๋ฐ์ดํฐ๊ฐ ๋ฐ๋๊ฑฐ๋, ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋งํ ๋ ์
๋ฐ์ดํธ ๋ฉ๋๋ค. ์๋์ ๊ฒฝ์ฐ์ฃ !
- props๊ฐ ๋ฐ๋ ๋
- state๊ฐ ๋ฐ๋ ๋
- ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์ ๋ฐ์ดํธ ๋์์ ๋(=๋ฆฌ๋ ๋๋งํ์ ๋)
- ๋๋, ๊ฐ์ ๋ก ์ ๋ฐ์ดํธ ํ์ ๊ฒฝ์ฐ! (forceUpdate()๋ฅผ ํตํด ๊ฐ์ ๋ก ์ปดํฌ๋ํธ๋ฅผ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค.)
- ์ ๊ฑฐ๋ ํ์ด์ง๋ฅผ ์ด๋ํ๊ฑฐ๋, ์ฌ์ฉ์์ ํ๋(์ญ์ ๋ฒํผ ํด๋ฆญ ๋ฑ)์ผ๋ก ์ธํด ์ปดํฌ๋ํธ๊ฐ ํ๋ฉด์์ ์ฌ๋ผ์ง๋ ๋จ๊ณ์ ๋๋ค.
โญ ์ฃผํน๊ธฐ (React) ์ ๋ฌธ ์์
๋ฆฌ์กํธ ์ ๋ฌธ ๊ฐ์๊ฐ ์์๋์๋ค. ๊ฐ์ธ ๊ณผ์ ๋ถํฐ ํ ๊ณผ์ ๊น์ง ๋ถ์ฌ ๋ฐ์๊ณ ์๋ก์ด ํ ์ฃผ๊ฐ ์์๋์๋ค.
๊ธฐ๋ค๋ฆฌ๊ณ ๊ธฐ๋ค๋ ธ๋ ๋ฆฌ์กํธ ๊ฐ์. ํผ์์ ๋ ํ์ผ๋ก ๋ฆฌ์กํธ๋ฅผ ๊ณต๋ถํ์๊ธฐ์ ๋์ฑ ๊ธฐ๋๋์๋ค. ์์ด ๊ฐ์๋ฅผ ์ฃผ๋ก ๋ด์์ ์ฌ์ฉ๋ฒ์ ์์๋ ์ ํํ ๊ฐ๋ ์ ์ก๋ ๋ถ๋ถ์ด ์ค์ค๋ก ๋ง์ด ๋ถ์กฑํ๋ค๊ณ ์๊ฐํ๊ณ , ๊ทธ๋์ ๋ ์์ ๊ฐ์ด ์์๋ ๊ฒ๋ ์์๋ค.
๋ฆฌ์กํธ ์ ๋ฌธ ๊ฐ์๋ ๋๊ฐ์ด ๋ฆฌ์กํธ๋ฅผ ์ด๋ ์ ๋ ์ฌ์ฉํด๋ดค์ง๋ง ๊ฐ๋ ์ด ๋ถ์กฑํ ์ฌ๋๋ค์ด ๋ณด๊ธฐ์๋ ๋น ๋ฅธ ์ดํด๋ฅผ ๋์ธ ์ ์๋ ๊ฐ์์๋๋ฐ, ์ฒ์ ๋ฆฌ์กํธ๋ฅผ ์ ํ๋ ์ฌ๋๋ค์ ๋ง ๋ชฐ์์น๋ ๋ด์ฉ๋ค์ ์ ์ ์ด ์์ ๊ฒ ๊ฐ์๋ค.
ํจ์ํ ์ปดํฌ๋ํธ์ ์ต์ํ ๋ด๊ฐ ํด๋์คํ๋ ๋ฐฐ์ฐ๊ฒ ๋ ์ ๋ ์ข์๋ค. ํด๋์คํ์ ๊ตฌ์กฐ๋ง ์ด๋์ ๋ ์ ๋ฟ ์ ๋๋ก ์ฌ์ฉํด ๋ณธ์ ์ด ์์ด์ ๋ฌด์งํ๋ฐ ๊ฐ์์์ ๋ ๊ฐ์ง ๋ชจ๋๋ฅผ ์ด๋ ์ ๋ ๋ณด์ฌ์ค๋ค.