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

Brad Westfall, React: "mount" vs "render"

by kicksky 2021. 2. 13.

๐Ÿ”น ๋ Œ๋”๋ง

: ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ(ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์—์„œ render ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ๋  ๋•Œ) ๋ฐœ์ƒ. ํ˜ธ์ถœํ•˜๋ฉด DOM ์ƒ์„ฑ์— ๊ด€ํ•œ ์ง€์‹œ ์‚ฌํ•ญ๋“ค์ด ๋ฐ˜ํ™˜๋œ๋‹ค.

๐Ÿ”น ๋งˆ์šดํŒ…

: ๋ฆฌ์•กํŠธ๊ฐ€ ์ตœ์ดˆ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•  ๋•Œ. ์•ž์„  ์ง€์‹œ์‚ฌํ•ญ๋“ค๋กœ๋ถ€ํ„ฐ ์ฒซ DOM์„ ์‹ค์ œ๋กœ ๋นŒ๋“œํ•œ๋‹ค.

๐Ÿ”น ๋ฆฌ๋ Œ๋”๋ง

: ๋ฆฌ์•กํŠธ๊ฐ€ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ํ˜ธ์ถœํ•˜์—ฌ ์ด๋ฏธ ๋งˆ์šดํŠธ๋œ ์ปดํฌ๋„ŒํŠธ์— ์ ์šฉํ•  ์ƒˆ๋กœ์šด ์ง€์‹œ์‚ฌํ•ญ๋“ค์„ ๊ฐ€์ ธ์˜จ๋‹ค.

 

๐Ÿ”ธ ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ

App์˜ ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ -> render ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ [ ๋ Œ๋”๋ง ] -> DOM ๋นŒ๋“œ์— ํ•„์š”ํ•œ ์ง€์‹œ์‚ฌํ•ญ๋“ค์„ ์–ป์Œ

- ์ตœ์ดˆ์˜ ๋ Œ๋”๋ง์ธ ๊ฒฝ์šฐ, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ ํ•œ๋‹ค๊ณ  ํ‘œํ˜„

state๊ฐ€ ๋ณ€๊ฒฝ -> ๋ฆฌ๋ Œ๋”; render ์žฌํ˜ธ์ถœ -> DOM ์—…๋ฐ์ดํŠธ์— ๊ด€ํ•œ ์ƒˆ๋กœ์šด ์ง€์‹œ์‚ฌํ•ญ์ด ๋ฐ˜ํ™˜ -> ์žฌ์กฐ์ •

 

๐Ÿ”ธ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ

ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ (๋ Œ๋”๋ง) ๋˜๊ณ , ๋งˆ์šดํŠธ๋ฅผ ์œ„ํ•œ ์ง€์‹œ์‚ฌํ•ญ๋“ค์ด ๋ฆฌํ„ด

์ปดํฌ๋„ŒํŠธ๋งˆ๋‹ค ๊ฐ์ž์˜ ์Šค์ผ€์ฅด

 


'React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

forwardRef  (0) 2021.11.22
Lazy-loading  (0) 2021.05.08
Kakao Map API์—์„œ ๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง  (0) 2021.04.07
Rendered more hooks than during the previous render  (0) 2021.03.28

๋Œ“๊ธ€