๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

JavaScript/React2

[React] ํ™˜๊ฒฝ์„ค์ • ์›๋ž˜ ๋ฆฌ์•กํŠธ๋Š” ์›นํŒฉ์ด๋ผ๋Š” Bundler๋กœ ์‹คํ–‰ํ•œ๋‹ค.์ด ๊ฐ•์˜๋Š” ๋ฆฌ์•กํŠธ ๋ฌธ๋ฒ•๊ณผ ๋ฆฌ์•กํŠธ๋ฅผ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•จ์ด๋ฏ€๋กœ React๋ฅผ ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•˜๋Š” ํ™˜๊ฒฝ์„ค์ •์€ ํ•˜์ง€ ์•Š๋Š”๋‹ค. 1. React ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ํ™˜๊ฒฝ์„ค์ •์ด ๋˜์–ด์•ผํ•˜๋Š”๋ฐ ๋ฆฌ์•กํŠธ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ฐœ๋ฐœ์šฉ cdn ๋งํฌ๊ฐ€ ์žˆ๋‹ค. ๋ฆฌ์•กํŠธ์—์„œ๋„ ์ง์ ‘ ๊ฐœ๋ฐœ์šฉ์œผ๋กœ๋งŒ ์“ฐ๋ผ๊ณ  ๋ช…์‹œ๋˜์–ด์žˆ๊ณ  ๋ฐฐํฌ์šฉ์œผ๋กœ๋Š” ์ถ”์ฒœํ•˜์ง€ ์•Š๋Š”๋‹ค. CDN ๋งํฌ – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org ๋‚˜๋Š” ๋ฐฐํฌ๊นŒ์ง€ ํ•  ๋‚ด์šฉ์ด ์•„๋‹ˆ๋ฏ€๋กœ ๊ฐ•์˜์™€ ๋™์ผํ•˜๊ฒŒ cdn์„ ์ด์šฉํ•œ๋‹ค.react.js ๋Š” react ๊ธฐ๋Šฅ์ธ ์ปดํฌ๋„ŒํŠธ, ๊ฐ€์ƒ๋” ๋“ฑ์„ ์ง€์›ํ•œ๋‹ค. 2. React-Dom React Dom์€ ๊ฐ€์ƒ DOM์„ ์‹ค.. 2024. 8. 4.
[React] Intro ๋ฆฌ์•กํŠธ๋Š” ํฌ๊ฒŒ ์„ธ๊ฐ€์ง€ ๊ฐœ๋…์ด ์ค‘์š”ํ•˜๋‹ค.1. Reactive2. Virtual DOM3. Component Reactive๋Š” ํŠน์ • ๊ฐ’์— ์˜์กดํ•ด ์ž๋™์œผ๋กœ ๋ฐ˜์‘ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.Vanila js๋กœ ๊ฒ€์ƒ‰ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๋ฉด์„œ ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๊ฒŒ ๋˜๋ฉด(๊ฒ€์ƒ‰ ๋“ฑ) ๋‹ค์‹œ rendering์„ ํ•˜๋Š” ๊ณผ์ •์ด ํ•„์š”ํ–ˆ์—ˆ๋‹ค.ํ•˜์ง€๋งŒ ๋ฆฌ์•กํŠธ๋Š” ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๋ฉด ๋‹ค์‹œ rendering ํ•  ํ•„์š”๊ฐ€ ์—†๋„๋ก ์„ค๊ณ„๋˜์—ˆ๋‹ค. react๋Š” DOM API๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด์„œ ์„ฑ๋Šฅ ์ €ํ•˜๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด Virtual DOM์„ ์ œ๊ณตํ•œ๋‹ค.Virtual DOM์—์„œ ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„์„ ํ™•์ธํ•˜๊ณ  ๋ฐ”๋€ ๋ถ€๋ถ„๋งŒ ํ™•์ธํ•˜์—ฌ DOM์— ์ œ๊ณตํ•œ๋‹ค.์ด๋Ÿฐ ํŠน์„ฑ ๋•Œ๋ฌธ์— reactive ํ•˜๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. ์•„๋ž˜๋Š” ์ฐธ๊ณ ํ•˜๋ฉด ์ข‹์€ ์˜ˆ์‹œ ์˜์ƒ์ด๋‹ค.https://www.youtube.co.. 2024. 8. 3.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”