Skip to content

React โ€‹

React ๊ด€๋ จ ํฌ์ŠคํŠธ๋“ค์ž…๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ์—์„œ๋„ ์˜์กด์„ฑ ์ฃผ์ž…์œผ๋กœ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถฐ๋ณด์ž! - Renderer Props ํŒจํ„ด (feat.DIP)

์˜์กด์„ฑ ์ฃผ์ž…์ด ๋ฐฑ์—”๋“œ์—์„œ๋งŒ ์‚ฌ์šฉ๋˜๋Š” ํŒจํ„ด์ด๋ผ๊ณ ? ๋ฆฌ์•กํŠธ์—์„œ๋„ ์˜์กด์„ฑ ์ฃผ์ž…์„ ํ™œ์šฉํ•ด ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถ”๊ณ  ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์—ฌ๋ณด์ž! Renderer Props ํŒจํ„ด์„ ์˜์กด์„ฑ ์ฃผ์ž…๊ณผ OCP, DIP ์›์น™๊ณผ ์—ฐ๊ฒฐ์ง€์–ด ์•Œ์•„๋ด…๋‹ˆ๋‹ค

[Redux ๊ณต์‹๋ฌธ์„œ ๋ฒˆ์—ญ] ์ „์—ญ์ƒํƒœ๋ฅผ ์–ด๋–ป๊ฒŒ ์„ค๊ณ„ํ•ด์•ผ ํ• ๊นŒ? - Normalizing State Shape

Redux ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ƒํƒœ ๊ตฌ์กฐ๋ฅผ ์ •๊ทœํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ด…๋‹ˆ๋‹ค. ์ด ๊ธ€์€ Redux ๊ณต์‹ ๋ฒˆ์—ญ์ด ์•„๋‹ˆ๋ฉฐ, ๊ฐœ์ธ ํ•™์Šต ๋ฐ ๊ณต์œ  ๋ชฉ์ ์œผ๋กœ ์ž‘์„ฑ๋œ ๋น„๊ณต์‹ ๋ฒˆ์—ญ์ž…๋‹ˆ๋‹ค. (์›๋ฌธ : https://redux.js.org/usage/structuring-reducers/normalizing-state-shape)

๋ฆฌ์•กํŠธ์—์„œ ๊ณ ์ฐจ์ปดํฌ๋„ŒํŠธ(HOC)๋กœ ํšก๋‹จ ๊ด€์‹ฌ์‚ฌ๋ฅผ ์ฒ˜๋ฆฌํ•ด๋ณด์ž (feat. AOP - ๊ด€์ ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ)

๋ฆฌ์•กํŠธ์—์„œ ๊ณ ์ฐจ์ปดํฌ๋„ŒํŠธ(HOC)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํšก๋‹จ ๊ด€์‹ฌ์‚ฌ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ด…๋‹ˆ๋‹ค. ๊ด€์ ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ(AOP)์˜ ๊ฐœ๋…์„ ๋„์ž…ํ•˜์—ฌ ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค

Isomorphic ์ด๋ž€ ๋ญ๊ณ  ์–ด๋–จ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋„ค์ด๋ฐ์ผ๊นŒ ? (feat. useIsomorphicEffect ๋Š” ๋ญ˜๊นŒ)

์˜คํ”ˆ์†Œ์Šค๋ฅผ ๋ณด๋‹ค๋ณด๋ฉด Isomorphic ์ด๋ผ๋Š” ๋‹จ์–ด๋ฅผ ๋งˆ์ฃผ์น˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. Isomorphic ์ด๋ž€ ๋ฌด์—‡์ธ์ง€, ๊ทธ๋ฆฌ๊ณ  ์–ด๋–จ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋„ค์ด๋ฐ์ธ์ง€์— ๋Œ€ํ•ด ์•Œ์•„๋ด…๋‹ˆ๋‹ค. ๋˜ ๋ฆฌ์•กํŠธ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” useIsomorphicEffect ํ›…๋„ ํ•จ๊ป˜ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค.

DIY React 1 - JSX ๋งˆํฌ์—…์„ Virtual DOM ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•˜๊ธฐ

React์˜ ํ•ต์‹ฌ ๊ฐœ๋…๊ณผ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด, React๋ฅผ ์ง์ ‘ ๊ตฌํ˜„ํ•ด๋ณด๋Š” ์‹œ๋ฆฌ์ฆˆ์˜ ์ฒซ ๋ฒˆ์งธ ๊ธ€์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” JSX ๋งˆํฌ์—…์„ Virtual DOM ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

[์ปค๋ฆฌ์–ดํ•] React ๋ Œ๋”๋ง ์ตœ์ ํ™” ๋ถ„ํˆฌ๊ธฐ (useState ์—์„œ useRef, ๊ทธ๋ฆฌ๊ณ  EventBus ์•„ํ‚คํ…์ณ๊นŒ์ง€)

React์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด useState ๋Œ€์‹  useRef๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ถˆํ•„์š”ํ•œ ๋ฆฌ๋ Œ๋”๋ง์„ ์ค„์ด๊ณ , EventBus ์•„ํ‚คํ…์ณ๋ฅผ ๋„์ž…ํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ํšจ์œจ์ ์ธ ํ†ต์‹  ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

react-toastify ๋Š” ์–ด๋–ป๊ฒŒ ๋ฆฌ์•กํŠธ ๋ Œ๋”๋ง์‚ฌ์ดํด ๋ฐ–์—์„œ๋„ ํ† ์ŠคํŠธ๋ฅผ ๋„์šธ์ˆ˜ ์žˆ์„๊นŒ?

๋ฆฌ์•กํŠธ์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ์™€ ๋ Œ๋”๋ง์€ ๋ณดํ†ต ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์˜ state, props๋ฅผ ํ†ตํ•ด ์ด๋ฃจ์–ด์ง„๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ง„์งœ ์‹ค๋ฌด์—์„œ๋Š” "๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ๋ฐ”๊นฅ"์—์„œ, ์ฆ‰ ๋น„๋™๊ธฐ ๋กœ์ง์ด๋‚˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ, API ์‘๋‹ต ๋“ฑ ์–ด๋””์„œ๋“  ํ† ์ŠคํŠธ(์•Œ๋ฆผ)๋ฅผ ๋„์šฐ๊ณ  ์‹ถ์„ ๋•Œ๊ฐ€ ๋งŽ๋‹ค. ์–ด๋–ป๊ฒŒ ๊ทธ๊ฒŒ ๊ฐ€๋Šฅํ• ๊นŒ?

๋ญ? Context ๊ฐ€ ๋ณต์‚ฌ๊ฐ€ ๋œ๋‹ค๊ณ ? (Context Provider Hell ํ•ด๊ฒฐํ•˜๊ธฐ)

React Context API๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” 'Context Provider Hell'์ด ๋ฌด์—‡์ธ์ง€, ๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ ‘๊ทผํ•œ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

์—ฅ? Modal ๊ทธ๊ฑฐ z-index:99999 ๋ฐ•์œผ๋ฉด ๋˜๋Š”๊ฑฐ ์•„๋‹˜? (feat. createPortal๊ณผ Stacking Context)

React ์—์„œ Modal ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌํ˜„ํ• ๋•Œ ๋‹จ์ˆœํžˆ z-index ๋ฅผ ๋†’๊ฒŒ ์คฌ์„๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ์™€ createPortal ์„ ์ด์šฉํ•ด ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

React๋กœ ๋ฌดํ•œ ์Šคํฌ๋กค ๊ตฌํ˜„ํ•˜๊ธฐ (Intersection Observer ํ™œ์šฉ)

React์™€ Intersection Observer API๋ฅผ ํ™œ์šฉํ•ด ์„ฑ๋Šฅ ์ตœ์ ํ™”๋œ ๋ฌดํ•œ ์Šคํฌ๋กค์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์ง€๋„ค์ด์…˜์˜ ์ข…๋ฅ˜๋ถ€ํ„ฐ ์ปค์Šคํ…€ ํ›…๊นŒ์ง€ ๋‹จ๊ณ„๋ณ„๋กœ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

React Transition Group ๋œฏ์–ด๋ณด๊ธฐ

๋””์ž์ธํ•™๊ณผ ์กธ์—…์ „์‹œ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๋ฉด์„œ React Transition Group ์„ ํ†ตํ•ด DOM ๊ฐœ์ˆ˜๋ฅผ ์ค„์—ฌ๋ณด๋ฉด์„œ React Transition Group ์€ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ์‚ดํŽด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

Redux ํ•ต์‹ฌ ๊ฐœ๋…๊ณผ Flux ์•„ํ‚คํ…์ณ

Redux์˜ ํ•ต์‹ฌ ๊ฐœ๋…๊ณผ Flux ์•„ํ‚คํ…์ฒ˜์— ๋Œ€ํ•ด ์•Œ์•„๋ด…๋‹ˆ๋‹ค. MVC, MVVM, Container-Presenter ํŒจํ„ด๊ณผ ๋น„๊ตํ•˜๋ฉฐ Redux๊ฐ€ ์–ด๋–ป๊ฒŒ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๋Š”์ง€ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

React ๋Š” ํ•ญ์ƒ ๋‹จ๋ฐฉํ–ฅ์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ํ๋ฅผ๊นŒ? (useImperativeHandle)

React ๋Š” ํ•ญ์ƒ ๋ฐ์ดํ„ฐ๊ฐ€ ๋‹จ๋ฐฉํ–ฅ์œผ๋กœ ํ๋ฅผ๊นŒ์š”? React ์˜ useImperativeHandle ํ›…์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฉ”์„œ๋“œ๋‚˜ ์†์„ฑ์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ด…๋‹ˆ๋‹ค