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

Lect & Tip132

๋ฆฌ์•กํŠธ์™€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์šฉํ•œ ์•ˆ์ •์ ์ธ ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ ๋ฆฌ์•กํŠธ์™€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์šฉํ•œ ์•ˆ์ •์ ์ธ ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ๋ฆฌ์•กํŠธ์™€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ์กฐํ•ฉ์€ ์ตœ๊ทผ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์—์„œ ๊ฐ€์žฅ ์ธ๊ธฐ ์žˆ๋Š” ์„ ํƒ์ง€ ์ค‘ ํ•˜๋‚˜๋กœ ์ž๋ฆฌ์žก์•˜์Šต๋‹ˆ๋‹ค. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์ •์  ํƒ€์ž… ์ฒดํ‚น๊ณผ ๊ฐ•๋ ฅํ•œ ์ธํ„ฐํŽ˜์ด์Šค ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์—ฌ, ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ„๊ทธ๋ฅผ ์‚ฌ์ „์— ์˜ˆ๋ฐฉํ•˜๊ณ , ์ฝ”๋“œ์˜ ์•ˆ์ •์„ฑ๊ณผ ๊ฐ€๋…์„ฑ์„ ๋†’์—ฌ์ค๋‹ˆ๋‹ค.๋ณธ ํฌ์ŠคํŒ…์—์„œ๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ์˜ ์ด์ , ์‹ค์ œ ์‚ฌ๋ก€์™€ ์ฝ”๋“œ ์ƒ˜ํ”Œ, ๊ทธ๋ฆฌ๊ณ  ์•ˆ์ •์ ์ธ ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„๋ฅผ ์œ„ํ•œ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ๊ตฌ์ฒด์ ์œผ๋กœ ์†Œ๊ฐœํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋„์ž…ํ•ด์•ผ ํ•˜๋Š” ์ด์œ ๋ฆฌ์•กํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์˜ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ์„œ ์žฌ์‚ฌ์šฉ์„ฑ๊ณผ ํ™•์žฅ์„ฑ์ด ๋›ฐ์–ด๋‚œ ๊ตฌ์กฐ๋ฅผ ์ œ๊ณตํ•˜์ง€๋งŒ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™์  ํƒ€์ดํ•‘ ํŠน์„ฑ์œผ๋กœ ์ธํ•ด ๋Ÿฐํƒ€์ž„ ์‹œ์ ์—์„œ ํƒ€์ž… ๊ด€๋ จ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  .. 2025. 6. 2.
useState์™€ useEffect, ๋ฆฌ์•กํŠธ Hooks๋ฅผ ํ™œ์šฉํ•œ ์ƒํƒœ ๊ด€๋ฆฌ์™€ ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ useState์™€ useEffect, ๋ฆฌ์•กํŠธ Hooks๋ฅผ ํ™œ์šฉํ•œ ์ƒํƒœ ๊ด€๋ฆฌ์™€ ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„๋ฆฌ์•กํŠธ 16.8 ๋ฒ„์ „ ์ดํ›„ ๋“ฑ์žฅํ•œ Hooks๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ ์ƒํƒœ ๊ด€๋ฆฌ์™€ ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜์—ฌ, ์ฝ”๋“œ์˜ ๊ฐ„๊ฒฐ์„ฑ๊ณผ ์žฌ์‚ฌ์šฉ์„ฑ์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œ์ผฐ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” useState, useEffect, useContext ๋“ฑ ๊ธฐ๋ณธ ์ œ๊ณต๋˜๋Š” ๋‹ค์–‘ํ•œ ํ›…๋“ค์„ ํ™œ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐ ๋กœ์ง ๋ถ„๋ฆฌ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ž์„ธํžˆ ๋‹ค๋ฃจ๊ณ , ์ปค์Šคํ…€ ํ›… ์ œ์ž‘ ์‚ฌ๋ก€๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ด๋Š” ์ „๋žต์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๋ฆฌ์•กํŠธ Hooks์˜ ๊ธฐ๋ณธ ์›๋ฆฌ์™€ ์žฅ์ ๋ฆฌ์•กํŠธ Hooks๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์™€ ๋™์ผํ•œ ๊ธฐ๋Šฅ(์ƒํƒœ ๊ด€๋ฆฌ, ๋ผ์ดํ”„์‚ฌ์ดํด ๋ฉ”์„œ๋“œ ๋Œ€์ฒด)์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ.. 2025. 5. 30.
๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ด๋Š” ์ปดํฌ์ง€์…˜ ํŒจํ„ด ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ด๋Š” ์ปดํฌ์ง€์…˜ ํŒจํ„ด๋ฆฌ์•กํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์˜ UI ๊ฐœ๋ฐœ์„ ํ†ตํ•ด ์ฝ”๋“œ์˜ ๋ชจ๋“ˆํ™”์™€ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ๋Œ€๊ทœ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ์œ ์ง€๋ณด์ˆ˜์„ฑ๊ณผ ํ™•์žฅ์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด์„œ๋Š”, ๋‹จ์ˆœํžˆ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์„ ๋„˜์–ด์„œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํŒจํ„ด์„ ๋„์ž…ํ•˜๋Š” ๊ฒƒ์ด ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค.์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ปดํฌ๋„ŒํŠธ ์ปดํฌ์ง€์…˜, ๊ณ ์ฐจ ์ปดํฌ๋„ŒํŠธ(HOC), ๋ Œ๋” ํ”„๋กœํ”„(Render Prop) ๋“ฑ ๋‹ค์–‘ํ•œ ํŒจํ„ด์„ ํ™œ์šฉํ•˜์—ฌ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์˜ ์žฌ์‚ฌ์šฉ์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์‹ฌ๋„ ์žˆ๊ฒŒ ๋…ผ์˜ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.์ปดํฌ๋„ŒํŠธ ์ปดํฌ์ง€์…˜์˜ ๊ฐœ๋…๊ณผ ์žฅ์ ์ปดํฌ๋„ŒํŠธ ์ปดํฌ์ง€์…˜์€ ๋ฆฌ์•กํŠธ์˜ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์„ค๊ณ„ ์ฒ ํ•™ ์ค‘ ํ•˜๋‚˜๋กœ, ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ž‘์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์กฐํ•ฉํ•˜์—ฌ ๋ณต์žกํ•œ UI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์€ ๋‹ค.. 2025. 5. 27.
React Router ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…๊ณผ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ lazy์™€ Suspense ๋™์  ์ปดํฌ๋„ŒํŠธ ๋กœ๋”ฉ React Router ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…๊ณผ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ lazy์™€ Suspense ๋™์  ์ปดํฌ๋„ŒํŠธ ๋กœ๋”ฉํ˜„๋Œ€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์ ์  ๋” ๋ณต์žกํ•ด์ง€๊ณ  ๊ธฐ๋Šฅ์ด ํ’๋ถ€ํ•ด์ง์— ๋”ฐ๋ผ, ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„์™€ ์ „์ฒด ์„ฑ๋Šฅ์ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์— ํฐ ์˜ํ–ฅ์„ ๋ฏธ์น˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, ๋ฆฌ์•กํŠธ(React) ๊ธฐ๋ฐ˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ๋Š” ๋ถˆํ•„์š”ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒˆ๋“ค์˜ ํฌ๊ธฐ๊ฐ€ ์ปค์ง€๋ฉด์„œ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์‹œ๊ฐ„์ด ๊ธธ์–ด์ง€๊ณ , ์‚ฌ์šฉ์ž ์ดํƒˆ๋ฅ ์ด ์ฆ๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋ฆฌ์•กํŠธ์—์„œ๋Š” ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…(Code Splitting)๊ณผ ๋™์  ์ปดํฌ๋„ŒํŠธ ๋กœ๋”ฉ ๊ธฐ๋ฒ•์„ ๋„์ž…ํ•˜์—ฌ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๋ฅผ ๊ฐœ์„ ํ•˜๊ณ , ์‚ฌ์šฉ์ž๊ฐ€ ์‹ค์ œ๋กœ ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋งŒ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋„๋ก ์ตœ์ ํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ฆฌ์•กํŠธ์˜ ๋‚ด์žฅ ๊ธฐ๋Šฅ์ธ lazy์™€ Suspense๋ฅผ ํ™œ์šฉํ•˜.. 2025. 5. 25.
Emotion, CSS-in-JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ - ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ๊ฐ€๋Šฅํ•œ ํ…Œ๋งˆ์™€ ์Šคํƒ€์ผ ์‹œ์Šคํ…œ ๊ตฌ์ถ• Emotion, CSS-in-JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ - ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ๊ฐ€๋Šฅํ•œ ํ…Œ๋งˆ์™€ ์Šคํƒ€์ผ ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ˜„๋Œ€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์‚ฌ์šฉ์ž ๊ฐœ๊ฐœ์ธ์˜ ์ทจํ–ฅ๊ณผ ํ™˜๊ฒฝ์— ๋งž์ถ˜ ๋งž์ถคํ˜• UI๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ ๊ฒฝ์Ÿ๋ ฅ์œผ๋กœ ์ž‘์šฉํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์šฉํ•œ ๊ฐœ๋ฐœ์—์„œ๋Š” ํ…Œ๋งˆ์™€ ์Šคํƒ€์ผ ์‹œ์Šคํ…œ์„ ์œ ์—ฐํ•˜๊ฒŒ ๊ตฌ์„ฑํ•˜์—ฌ, ์‚ฌ์šฉ์ž๊ฐ€ ๋™์ ์œผ๋กœ ์ธํ„ฐํŽ˜์ด์Šค์˜ ์ƒ‰์ƒ, ํฐํŠธ, ๋ ˆ์ด์•„์›ƒ ๋“ฑ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” CSS-in-JS ๊ธฐ๋ฒ•์„ ์ค‘์‹ฌ์œผ๋กœ Styled Components, Emotion ๋“ฑ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ๊ฐ€๋Šฅํ•œ ํ…Œ๋งˆ์™€ ์Šคํƒ€์ผ ์‹œ์Šคํ…œ์„ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ƒ์„ธํžˆ ์†Œ๊ฐœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.ํ•„์ž๊ฐ€ ํ˜„์—…์‹œ์ ˆ ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ์ด๋Ÿฐ ์‹œ์Šคํ…œ ๊ตฌ์ถ•์— ๋Œ€ํ•ด์„œ ๊ฐ•์กฐํ–ˆ์ง€๋งŒ ๋ฒˆ๋ฒˆ์ด ๊นŒ์˜€์Šต๋‹ˆ๋‹ค. ์ด์œ ๋Š” ๋น„์šฉ์ด์ฃ . ์‚ฌ์‹ค ๋น„.. 2025. 5. 22.
์›น ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•œ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ ๊ฐ€์ด๋“œ ์›น ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•œ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ ๊ฐ€์ด๋“œ์›น ์ ‘๊ทผ์„ฑ์€ ๋ชจ๋“  ์‚ฌ์šฉ์ž๊ฐ€ ์›น ์ฝ˜ํ…์ธ ๋ฅผ ์‰ฝ๊ฒŒ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณด์žฅํ•˜๋Š” ์ค‘์š”ํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค. ํŠนํžˆ ์‹œ๊ฐ, ์ฒญ๊ฐ, ์šด๋™ ๋Šฅ๋ ฅ ๋“ฑ์— ์ œ์•ฝ์ด ์žˆ๋Š” ์‚ฌ์šฉ์ž๋“ค๋„ ๋ฌธ์ œ์—†์ด ์›น ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก, ์Šคํฌ๋ฆฐ ๋ฆฌ๋” ์ง€์›, ํ‚ค๋ณด๋“œ ๋‚ด๋น„๊ฒŒ์ด์…˜, ARIA ์†์„ฑ ๋“ฑ์˜ ์ ‘๊ทผ์„ฑ ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์ด ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ ์‹œ ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ตฌ์ฒด์ ์ธ ์‚ฌ๋ก€์™€ ์ฝ”๋“œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์ƒ์„ธํžˆ ์„ค๋ช…๋“œ๋ฆฌ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.์›น ์ ‘๊ทผ์„ฑ์˜ ์ค‘์š”์„ฑ๊ณผ ๊ธฐ๋ณธ ์›์น™์›น ์ ‘๊ทผ์„ฑ์€ ๋‹จ์ˆœํ•œ ๊ธฐ์ˆ ์  ์š”๊ตฌ์‚ฌํ•ญ์„ ๋„˜์–ด, ์‚ฌํšŒ์  ์ฑ…์ž„์ด์ž ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX)์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ์ค‘์š”ํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค. ์žฅ์• ๋ฅผ ๊ฐ€์ง„ ์‚ฌ์šฉ์ž๋ฟ ์•„๋‹ˆ๋ผ ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์—์„œ ์›น ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•˜๋Š” ๋ชจ๋“  ์‚ฌ์šฉ์ž์—๊ฒŒ.. 2025. 5. 19.