๐Ÿ’ปCoding/๐Ÿ“˜ React

[React] ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  | ๋ฆฌ์•กํŠธ์˜ ์žฅ์ ๊ณผ ๋‹จ์ 

์Œ์€์‘ 2023. 3. 6. 13:33
728x90
๋ฐ˜์‘ํ˜•
React ๋ฆฌ์•กํŠธ
๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 
โ†ช๏ธ๋ฆฌ์•กํŠธ์˜ ์žฅ์ ๊ณผ ๋‹จ์ 

/
๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๐Ÿ˜Š
โ†ช๏ธ web-app : ๋ชจ๋ฐ”์ผ์•ฑ์ด๋ž‘ ์‚ฌ์šฉ์„ฑ์ด ๋น„์Šท
โ†ช๏ธ web-app์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” : React / Angular / Vue

/

[ ๋ฆฌ์•กํŠธ์˜ ์žฅ์  ]

โœ… ๋ชจ๋ฐ”์ผ์•ฑ์œผ๋กœ ๋ฐœํ–‰์ด ์‰ฌ์›Œ์š”!
ใ„ด React Native : ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ๋„ ๊ฐœ๋ฐœ ๊ฐ€๋Šฅ
(React Native ์‚ฌ์šฉ์‹œ JS๋กœ ๊ฐœ๋ฐœํ•ด ์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑ๊ณผ IOS ๋™์‹œ์— ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ)

โœ… ๋ชจ๋ฐ”์ผ์•ฑ์ฒ˜๋Ÿผ ๋น ๋ฅด๊ฒŒ ์ „ํ™˜๋˜๋Š” UX๋กœ ์‚ฌ์šฉ์ž ๋งŒ์กฑ ๋†’์Œ
ใ„ด ๋น ๋ฅธ ์—…๋ฐ์ดํŠธ์™€ ๋ Œ๋”๋ง ์†๋„
โžก๏ธ React๋Š” DOM์„ ์ง์ ‘ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์—…๋ฐ์ดํŠธ ํ•ด์•ผํ•  ์ตœ์†Œํ•œ์˜ ๋ถ€๋ถ„๋งŒ ์ฐพ์•„์„œ ๋ณ€๊ฒฝํ•˜๊ธฐ ๋•Œ๋ฌธ์—

โœ… ์นด์นด์˜ค ๋งŽ์€ ๋Œ€๊ธฐ์—…์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋น„์ฆˆ๋‹ˆ์Šค์  ๊ฐ•์ 

โœ… ์žฌ์‚ฌ์šฉ์„ฑ(Reusability)
ใ„ด ๋ชจ๋“  ํŽ˜์ด์ง€๊ฐ€ ์ปดํฌ๋„ŒํŠธ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์–ด
๋ธ”๋Ÿญ์„ ์กฐ๋ฆฝํ•˜๋“ฏ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์ด ์œ ์šฉํ•ด

โฌ‡โฌ‡โฌ‡

[ ๋ฆฌ์•กํŠธ์˜ ๋‹จ์ ]
โœ… ๋ฆฌ์•กํŠธ์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์ด ์–ด๋ ค์›€
ใ„ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ์ง€์‹ ์—†์œผ๋ฉด ์ดํ•ดํ•  ์ˆ˜ ์—†์Œ
โœ… ๊ณต๋ถ€ํ•  ๋‚ด์šฉ์ด ๋งŽ์Œ
โœ… ๋ฐ”๋€ ๋ถ€๋ถ„๋งŒ ์ฐพ์•„ ์—…๋ฐ์ดํŠธ ํ•˜๋Š”๋ฐ ์žˆ์–ด์„œ State ์ž˜๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ๋ฐ, ์–ด๋ ค์›€
โ†ช๏ธ๊ทธ๋ž˜์„œ ๋ณดํ†ต ํฐ ๊ทœ๋ชจ์˜ ํ”„๋กœ์ ํŠธ์˜ ๊ฒฝ์šฐ ์ด๋Ÿฌํ•œ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด์„œ
Redux, Recoil , Mobx ์™€ ๊ฐ™์€ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„์‚ฌ์šฉํ•œ๋‹ค๊ณ  ํ•จ!
โฌ‡โฌ‡โฌ‡

/
๐Ÿ“๋ฆฌ์•กํŠธ ๊ณต๋ถ€ํ•˜๊ธฐ ์ „ ํ•„์š”ํ•œ ์‚ฌ์ „์ง€์‹!
var let const
if else
for
function return
array object ๋‹ค๋ฃจ๊ธฐ
addEventListener
HTML / CSS
/
๋!
/
์˜ค๋Š˜๋ณด๋‹ค ๋‚ด์ผ ๋” ์„ฑ์žฅํ•˜๊ธธ ๋ฐ”๋ผ๋ฉฐ๐Ÿ˜Š
-
์˜ค๋Š˜๋ณด๋‹ค ๋‚ด์ผ ๋” Grow Up๐Ÿ–ค
 
728x90
๋ฐ˜์‘ํ˜•