React ์ฐธ๊ณ ์ ๊ฐ์
์ด ์น์ ์ React์ ๊ด๋ จ๋ ์์ ์ ๋ํ ์์ธํ ์ฐธ๊ณ ์๋ฅผ ์ ๊ณตํฉ๋๋ค. React์ ๋ํ ์๊ฐ๋ ํ์ตํ๊ธฐ ์น์ ์ ์ฐธ๊ณ ํ์ธ์.
React ์ฐธ๊ณ ์๋ ๋ค์๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ์ธ ํ์ ์น์ ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค.
React
React์ ํ๋ก๊ทธ๋๋ฐ ๊ธฐ๋ฅ.
- Hook - ์ปดํฌ๋ํธ์์ ๋ค์ํ React ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ธ์.
- ์ปดํฌ๋ํธ - JSX์์ ์ฌ์ฉํ ์ ์๋ ๋ด์ฅ ์ปดํฌ๋ํธ์ ๋๋ค.
- API - ์ปดํฌ๋ํธ ์ ์์ ์ ์ฉํ API๋ค์ ๋ค๋ฃน๋๋ค.
- ์ง์์ด - React ์๋ฒ ์ปดํฌ๋ํธ์ ํธํ๋๋ ๋ฒ๋ค๋ฌ์๊ฒ ์ง์๋ฅผ ์ ๊ณตํฉ๋๋ค.
React DOM
React DOM์ ๋ธ๋ผ์ฐ์ DOM ํ๊ฒฝ์์ ์คํ๋๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์๋ง ์ง์๋๋ ๊ธฐ๋ฅ์ ํฌํจํ๊ณ ์์ต๋๋ค. ์ด ์น์ ์ ๋ค์๊ณผ ๊ฐ์ด ๋๋ฉ๋๋ค.
- Hook - ๋ธ๋ผ์ฐ์ DOM ํ๊ฒฝ์์ ์คํ๋๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ Hook์ ๋๋ค.
- ์ปดํฌ๋ํธ - React๋ ๋ธ๋ผ์ฐ์ ๋ด์ฅ HTML ๋ฐ SVG ์ปดํฌ๋ํธ๋ฅผ ๋ชจ๋ ์ง์ํฉ๋๋ค.
- API -
react-dom
ํจํค์ง์๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์๋ง ์ง์๋๋ ๋ฉ์๋๊ฐ ํฌํจ๋์ด ์์ต๋๋ค. - ํด๋ผ์ด์ธํธ API -
react-dom/client
API๋ฅผ ์ฌ์ฉํ๋ฉด ๋ธ๋ผ์ฐ์ ์์ React ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ ์ ์์ต๋๋ค. - ์๋ฒ API -
react-dom/server
API๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ฒ์์ React ์ปดํฌ๋ํธ๋ฅผ HTML๋ก ๋ ๋๋งํ ์ ์์ต๋๋ค.
React์ ๊ท์น
React์๋ ํจํด ์ดํด๋ฅผ ์ฝ๊ฒ ํ๋ฉฐ ๊ณ ํ์ง์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๊ฒ ํ๋ ์ผ์ข ์ ๊ท์น ํน์ ๋ชจ๋ฒ์ ์ธ ๋ฐฉ์์ด ์์ต๋๋ค.
- ์ปดํฌ๋ํธ์ Hook์ ์์ํด์ผ ํฉ๋๋ค โ ์์์ฑ์ ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ๊ณ ๋๋ฒ๊ทธํ ์ ์๋๋ก ํ๋ฉฐ, React๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ์ปดํฌ๋ํธ์ Hook์ ์๋์ผ๋ก ์ต์ ํํ ์ ์๋๋ก ํฉ๋๋ค.
- React๊ฐ ์ปดํฌ๋ํธ์ Hook์ ํธ์ถํ๋ ๋ฐฉ์ โ React๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ต์ ํํ๊ธฐ ์ํด ํ์ํ ๋๋ง๋ค ์ปดํฌ๋ํธ์ Hook์ ๋ ๋๋งํฉ๋๋ค.
- Hook์ ๊ท์น โ Hook์ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์๋ก ์ ์๋์ง๋ง ํธ์ถ ์์น์ ์ ์ฝ์ด ์๋ ํน๋ณํ ์ ํ์ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ๋ก์ง์ ๋๋ค.
๋ ๊ฑฐ์ API
- ๋ ๊ฑฐ์ API -
react
ํจํค์ง์์ ๋ด๋ณด๋์ง๋งExported ์๋ก ์์ฑํ ์ฝ๋์์๋ ๊ถ์ฅํ์ง ์์ต๋๋ค.