React๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๊ณ Vue๋ ํ๋ ์์ํฌ์ ๋๋ค.
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ฌ์ฉ์๊ฐ ํ์ํ ๋๋ง๋ค ๊ฐ์ ธ๋ค ์ผ๋ค๊ฐ ๋บ๋ค๊ฐ ํ ์ ์๊ณ ๋ถ๋ถ์ ์ผ๋ก ์ฌ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค
ํ๋ ์์ํฌ๋ ๋ถ๋ถ์ ์ธ ์ฌ์ฉ์ด ๋ถ๊ฐ๋ฅํ๊ณ ํ๋ ์ ์ํฌ์ ์์ผ๋ก ๋ค์ด๊ฐ์ ํ๋ ์ ์ํฌ๊ฐ ์ง์ํด์ฃผ๋ ๋ฌธ๋ฒ์ ๋ฐ๋ผ์ ์์ฑํด์ค์ผ ์ ๋๋ก ๋์ํฉ๋๋ค.
๊ทธ๋์ React๋ ๊ฐ๋ฐ์๊ฐ ์์ ๋กญ๊ฒ ๊ฐ๋ฐํ ์ ์๋ ํ๊ฒฝ์ด๊ณ , Vue๋ vue์์ ์ง์ ํด์ค ๋ฌธ๋ฒ ๋ฐฉ์์ผ๋ก๋ง ๊ฐ๋ฐ ํ ์ ์์ต๋๋ค. ๋ฆฌ์กํธ๊ฐ ์์ ๋๊ฐ ๋ ๋๋ค๊ณ ํ๋ ๋ถ๋ถ์ด ์ด๋ฐ ํ์์ ์ธ ๋ถ๋ถ์์ ์จ๋ค๊ณ ์๊ฐํฉ๋๋ค.
- ๋ ๋ค Virtual Dom(๊ฐ์๋)์ ํ์ฉํฉ๋๋ค.
- ๋ฐ์์ ์ด๊ณ ์กฐํฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์ฝ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ง ์ง์คํ๊ณ ์๊ณ ๋ผ์ฐํ ๋ฐ ์ ์ญ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ์ปดํจ๋์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ต๋๋ค.
๊ฐ๊ฐ์ ์ฅ๋จ์ ์ด ์์ต๋๋ค.
Vue
• ๋ฌ๋ ์ปค๋ธ๊ฐ ๋ฆฌ์กํธ์ ๋นํด์ ๋ฎ์ต๋๋ค. ๋ชจ๋ ๊ฒ์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ด๋ฃจ์ด์ ธ์๋ ๋ฆฌ์กํธ๋ html ์ญํ ๋ jsํ์ผ์์์ ์ฐ์ง๋ง ๋ทฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ์ ํํ ๋ชฐ๋ผ๋ ๋ทฐ์์ ์ ๊ณตํด์ฃผ๋ ๋ฌธ๋ฒ๋ง์ ์ตํ๋ฉด ์ ๋์ํ๊ฒ ๊ตฌํํ ์ ์์ด ์์ฐ์ฑ์ด ๋น ๋ฅธ ํธ์ ๋๋ค.
• ์๋์ ๊ฒฝ์ฐ๋ ๋ฏธ์ธํ๊ฒ ๋ทฐ๊ฐ ์กฐ๊ธ ๋ ๋น ๋ฅด๋ค๊ณ ํฉ๋๋ค. ๊ทธ๋์ ์๋์ด์์ ๋ฏผ๊ฐํจ ์ฝ์ธ ๊ฑฐ๋ ์ฌ์ดํธ์์๋ ๋ทฐ๋ฅผ ์ฌ์ฉํ๋ค๊ณ ํฉ๋๋ค.
• ๊ท๋ชจ์ ์๊ณ ๊ฐ๋ฒผ์ด ํ๋ก์ ํธ๋ฅผ ๋น ๋ฅด๊ฒ ๋ง๋ค๊ณ ์ถ๋ค๊ฑฐ๋, ์๋ด ์ด์๊ฐ ๋ฏผ๊ฐ ํ ๋ ์ฐ๋ฉด ์ข์ต๋๋ค.
React
• ํ์ ์คํธ๋ฆฝํธ๋ ๋ฆฌ์กํธ๊ฐ ๋ ์ฌ์ฉํ๊ธฐ ํธํฉ๋๋ค. ๋ทฐ์์๋ ํ์ ์คํฌ๋ฆฝํธ ์ง์์ด ์๋ฒฝํ์ง ์์ต๋๋ค.
• ๋ณํ๊ฐ ๋น ๋ฅด๊ณ ํ์ ์ ์ ๋๋ค. ๋ฆฌ์กํธ์์ ์๋ก์ด ๊ธฐ๋ฅ์ด ๋์ค๋ฉด ๊ทธ ์ดํ์ ๋ทฐ๋ ๋์ค๋ ํธ์ผ๋ก ๋ฆฌ์กํธ๋ ์์ฒด์ ์ผ๋ก ์ง์ํด์ฃผ๋ ๊ธฐ๋ฅ์ด ์ ํ์ ์ด๊ณ ํ๋ก๊ทธ๋๋ฐ์ ์์ ๋๊ฐ ๋ง์ด ๋ณด์ฅ๋ฉ๋๋ค. ๊ทธ๋งํผ ๋ชจ๋ ์ํฉ์ ๋ํด์ ๋์ฒํ๊ธฐ์ ๋ ์ ์ฐํ ์ ์์ต๋๋ค.
• ํ๋ก์ ํธ ๊ท๋ชจ๊ฐ ํฌ๊ณ ์ ์ ํ์ฅ์ด ํ์ํ ๋, ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ๋ฅ์ํ ๋, ์ปค์คํฐ๋ง์ด์ง ๋ฐ ์์ ๋๊ฐ ๋์ ๊ฐ๋ฐํ๊ฒฝ์ด ์ข๋ค๋ฉด ์ถ์ฒํฉ๋๋ค!
Vue ๊ณต์ ํ์ด์ง React๋ ๋น๊ต ๐ https://kr.vuejs.org/v2/guide/comparison.html#React
'๊ฐ๋ฐ > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] React Custom Hooks (0) | 2022.03.23 |
---|---|
[React] useEffect ์ useLayoutEffect ์ ์ฐจ์ด์ (0) | 2022.03.22 |
[React] ๋ฆฌ์กํธ ํ๋ก์ ํธ Netlify๋ก ๋ฐฐํฌํ๊ธฐ (0) | 2022.02.21 |
[React.Js] UseState ์ฌ์ฉ / ๊ฐ๋จํ ๋ฆฌ์คํธ ๋ง๋ค๊ณ ์ง์ฐ๊ธฐ (0) | 2022.02.18 |
[React.Js] ๋ฆฌ์กํธ AXIOS ์ฌ์ฉํ๊ธฐ / API ๋ฐ์ดํฐ Fetchํ๊ธฐ (0) | 2022.02.18 |