๐Ÿฅ ๊ณต์‹๋ฌธ์„œ๋กœ ๋ฐฐ์šฐ๋Š” React

Sohyeon Bakยท2022๋…„ 8์›” 11์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
5/9
post-thumbnail

02. Rendering Elements

React-DOM

๋ฆฌ์—‘ํŠธ๋Š” ์ˆœ์ˆ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์ด๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋งŒ๋“ค์–ด ๋‚˜๊ฐ„๋‹ค.
๋ธŒ๋ผ์šฐ์ €๋Š” HTML, CSS, JavaScript๋งŒ์„ ์ฝ์„ ์ˆ˜ ์žˆ๋‹ค.
๋ฆฌ์—‘ํŠธ๋Š” ๊ฒฐ๊ตญ ๋ฐ”๋ฒจ์„ ์ด์šฉํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ณ€ํ™˜๋˜์–ด์ง€๊ณ  ๋ณ€ํ™˜๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ HTML๊ณผ ์—ฐ๊ฒฐ์‹œ์ผœ์ฃผ๋Š” ๊ฒƒ์ด React-DOM์ด๋‹ค.

React Elements

๋ฆฌ์—‘ํŠธ ์—˜๋ฆฌ๋จผํŠธ๋Š” ์ผ๋ฐ˜ ๊ฐ์ฒด(plain object)์ด๋ฉฐ ์‰ฝ๊ฒŒ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
React DOM์€ ๋ฆฌ์—‘ํŠธ ์—˜๋ฆฌ๋จผํŠธ์™€ DOM์ด ์ผ์น˜ํ•˜๋„๋ก DOM์„ ์—…๋ฐ์ดํŠธ ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

Rendering an Element into the DOM

<div id="root"></div>

๋ฆฌ์—‘ํŠธ๋กœ ๊ตฌํ˜„๋œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์ผ๋ฐ˜์ ์œผ๋กœ ํ•˜๋‚˜์˜ ๋ฃจํŠธ DOM ๋…ธ๋“œ๊ฐ€ ์žˆ๋‹ค.
HTML ํŒŒ์ผ ์–ด๋”˜๊ฐ€์— <div> ํƒœ๊ทธ๊ฐ€ ์žˆ๊ณ , ์ด ์•ˆ์— ๋ชจ๋“  ์—˜๋ฆฌ๋จผํŠธ๋ฅผ React DOM์—์„œ ๊ด€๋ฆฌํ•ด์„œ ๋ฃจํŠธ(root) DOM ๋…ธ๋“œ๋ผ๊ณ  ํ•œ๋‹ค.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

์—ฌ๋Ÿฌ ๋ฆฌ์—‘ํŠธ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ฃจํŠธ DOM ๋…ธ๋“œ์— ๋ Œ๋”๋งํ•˜๊ธฐ ์œ„ํ•ด์„œ ReactDOM์˜ render ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

ReactDOM.render(element, container[, callback])

element ์ธ์ž์—๋Š” ๋ฆฌ์—‘ํŠธ์—์„œ ์‹คํ–‰๋  ํŒŒ์ผ(App)์„ ๋„ฃ์–ด์ฃผ๊ณ , container์— htmlํŒŒ์ผ์— ์ž‘์„ฑ๋œ id๊ฐ€ root์ธ ์š”์†Œ๋ฅผ ๋„ฃ์–ด์ค€๋‹ค.
publicํด๋”์˜ index.html ํŒŒ์ผ์— id๊ฐ€ root์ธ div ํƒœ๊ทธ์— element์ธ์ž์ธ ๋ฆฌ์—‘ํŠธ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—ฐ๊ฒฐ๋œ๋‹ค.

Updating the Rendered Element

๋ฆฌ์—‘ํŠธ ์—˜๋ฆฌ๋จผํŠธ๋Š” ๋ถˆ๋ณ€๊ฐ์ฒด์ด๋‹ค.
๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ƒ์„ฑ ํ›„ ์ž์‹์ด๋‚˜ ์†์„ฑ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค.
UI๋ฅผ ์—…๋ฐ์ดํŠธ ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์ƒˆ๋กœ์šด ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋‹ค์‹œ ReactDOM.render()๋กœ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•๋ฟ์ด๋‹ค.

์‹ค์ œ๋กœ ๋ฆฌ์—‘ํŠธ ์•ฑ์€ ReactDOM.render()์„ ํ•œ ๋ฒˆ๋งŒ ํ˜ธ์ถœํ•œ๋‹ค.

React Only Updates What's Necessary

React DOM์€ ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ์™€ ๊ทธ ์ž์‹ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ด์ „์˜ ์—˜๋ฆฌ๋จผํŠธ์™€ ๋น„๊ตํ•ด DOM์„ ์›ํ•˜๋Š” ์ƒํƒœ๋กœ ๋ณ€๊ฒฝํ•  ๋•Œ ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋งŒ DOM์„ ์—…๋ฐ์ดํŠธ ํ•œ๋‹ค.

๋งค์ดˆ๋งˆ๋‹ค UI๋ฅผ ๋‹ค์‹œ ๊ทธ๋ฆฌ๋„๋ก function component๋กœ jsx๋ฅผ ์ž‘์„ฑํ–ˆ์œผ๋‚˜ ๋ณ€๊ฒฝ๋˜๋Š” ์‹œ๊ฐ„๋งŒ ์—…๋ฐ์ดํŠธ ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

profile
์ •๋ฆฌํ•˜๊ณ  ๊ธฐ์–ตํ•˜๋Š” ๊ณณ

0๊ฐœ์˜ ๋Œ“๊ธ€