๐ React์ ๊ณต์ ๋ฌธ์๋ฅผ ๋ฏ์ด๋ณด๋ฉฐ ์๋กญ๊ฒ ๊นจ๋ฌ์ ๋ด์ฉ๋ค์ ์ ๋ฆฌํด๋ณด์ ๐ค 11์ ๋์งธ์ฃผ๊น์ง ๊ณต์ ๋ฌธ์์ ๋ํ 1์ฐจ ์ ๋ฆฌ๋ฅผ ์๋ฃํ ๋ค์ ๋ณต์ต์ ์งํํ๋ฉฐ ๋ด์ฉ์ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๋ค๋ฌ๋ ๊ณผ์ ์ ๊ฑฐ์น ์์ ์ ๋๋ค.
์ปดํฌ๋ํธ ๋ด์์ Promise ๋๋ Context์ ๊ฐ์ ๋ฆฌ์์ค ๊ฐ์ ์ฝ์ ๋ ์ฌ์ฉํ๋ React์ Hook
use hook ๊ด๋ จ ์ ๋ณด๋ค์ ๋ด์ ์ถ์ ์ ๋ฌธ์
HTML์ฒ๋ผ ์์ฑ๋์์ง๋ง ์ค์ ๋ก๋ ๋ด๋ถ์ ์ผ๋ก๋ JavaScript
Props๋ฅผ ํ์ฉํ์ฌ ์ปดํฌ๋ํธ๋ฅผ ์์ํ๊ฒ ๋ง๋ค์
{children} ์ ์ ๊ทน ํ์ฉํ์
์ปดํฌ๋ํธ๋ MarkUP์ ๋ฟ๋ฆด ์ ์๋ JS ํจ์์ด๋ค
๋ฃจํธ ์ปดํฌ๋ํธ์์ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ค์ ์์ฑํ์ง ๋ง๊ณ , ์๋ก์ด ํ์ผ์ ์์ฑํด ๋ฐ๋ก ์์ฑ
์ค๊ดํธ๋ฅผ ์ฌ์ฉ
null ๋ฐํ์ ํผ๋์ ์ผ๊ธฐํ ์ ์๋ค
React ๋ ๋๋ง์ ์ง์ญ ๋ณ์์ ๋ํ ๋ณ๊ฒฝ ์ฌํญ์ ๊ณ ๋ คํ์ง ์๋๋ค.
์ด๋ฒคํธ ํธ๋ค๋ฌ์ ์ ๋ฌ๋ ํจ์๋ ํธ์ถ๋์ง ์๊ณ ์ ๋ฌ๋์ด์ผ ํ๋ค. (ํจ์ ์ด๋ฆ๋ง ์ ๋ฌ)
React๊ฐ ์ปดํฌ๋ํธ๋ฅผ ํธ์ถํ๋ ๊ฒ
๊ฐ์ฒด ์ํ๋ฅผ ์ง์ ๋ณ๊ฒฝํด์๋ ์๋๋ค. ๋ฐ๋์ ์ ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ฑฐ๋ ๋ณต์ฌํด์ ๋ณ๊ฒฝํด์ผ ํ๋ค. ๋ฆฌ์ํธ๊ฐ ์ํ ๋ณํ๋ฅผ ๊ฐ์งํ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ด๋ค.
React๋ UI๋ฅผ ์ง์ ์กฐ์ํ์ง ์๋๋ค. ๋์ , ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๊ฒ์ ์ ์ธํ๋ฉด ๋๋ค.
์ด๋ค ์ํฉ์์ ์ด๋ค ๊ตฌ์กฐ์ ์ํ๊ฐ ๊ฐ์ฅ ํจ์จ์ ์ผ๊น
๊ณตํต ์์ ์ปดํฌ๋ํธ์์ props๋ก ์ํ๋ฅผ ์ ๋ฌ ๋ฐ๋๋ค
์ปดํฌ๋ํธ๊ฐ ์ด์์๋ค๋ฉด ์ํ๋ ์ ์ง๋๊ณ , ์ฃฝ์๋ค๊ฐ ๋ค์ ์ด์๋๋ค๋ฉด ์ํ๊ฐ ์ฌ์ค์ ๋๋ค
useState์ ๋น์ทํ์ง๋ง, ์ํ์ ๋ํ ์ฒ๋ฆฌ๊น์ง ํ ๋ฒ์ ๋ชจ์๋ ์ ์๋ ํจ์จ์ ์ธ ํ ์ด๋ค.
Props ์ ๋ฌ ๋ง๊ณ ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ๋ฅผ โํ ๋ ํฌํธโ ํ๋ ๋ฐฉ๋ฒ. ์ ์ญ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉ
useEffect ๋ด๋ถ์ ์ฝ๋๋ ๋ง์ดํธ ๋์์ ๋ ์คํ๋๊ณ , useEffect ๋ด๋ถ์ return์ ๋ง์ดํธ๊ฐ ํด์ ๋ ๋ ์คํ๋๋ค.
ํน์ ๋์์ ์คํ์ํค๊ณ ์ถ์๋ฐ, ์์น ์๋ ๋ค๋ฅธ ๋์๋ ํจ๊ป ์คํ๋๋ค๋ฉด useEffect์์ ์ ๊ฑฐ ์ํค๊ฑฐ๋ useEffect๋ฅผ ์ฌ์ฉํ์ง ๋ง์์ผ ํ๋ค.
๋ชจ๋ ์ปดํฌ๋ํธ๋ ๋์ผํ ์๋ช ์ฃผ๊ธฐ๋ฅผ ๊ฐ์ง๋ค.
ํน์ ์ํธ์์ฉ์ ์ฒ๋ฆฌํด์ผ ํ ๊ฒฝ์ฐ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ๋ค