TIL. What's React?

ichbinmin2ยท2021๋…„ 1์›” 11์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
10/25
post-thumbnail

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ๋ฉด์ ‘ ๊ธฐ์ถœ ๋ฌธ์ œ๋ฅผ ์ค€๋น„ํ•˜๋ฉด์„œ, React๋ฅผ ์“ฐ๋Š” ์ด์œ , React๊ฐ€ ์ถ”๊ตฌํ•˜๋Š” ์ปจ์…‰์ด ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•ด ๋‹ค์‹œ ํ•œ๋ฒˆ ๊ณต๋ถ€ํ•˜๊ณ  ์ด๋ฅผ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค.

๐Ÿ”น What's React?

React๋Š” 2013๋…„๋„์—์„œ ํŽ˜์ด์Šค๋ถ์—์„œ ๋งŒ๋“  Javascript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘์— ํ•˜๋‚˜์ด๋‹ค. ํŽ˜์ด์Šค๋ถ์—์„œ ์ž์ฒด์ ์œผ๋กœ ์ด์šฉ๋˜๊ณ  ์žˆ์œผ๋ฉฐ ์šฐ๋ฆฌ๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” ๋Œ€์ฒด์ ์ธ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์€ React๋กœ ๋งŒ๋“ค์–ด์กŒ๋‹ค. React๋Š” ์œ ์ € ์ธํ„ฐํŽ˜์ด์Šค(user interfaces)๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ์ฆ‰, ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” UI๋ฅผ ๋งŒ๋“ค๊ณ  ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•œ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒ์„ ํ•˜๊ฒŒ ๋˜๋ฉด ์ด๋ฒคํŠธ์— ๋งž๊ฒŒ ๋ฐ˜์‘ํ•˜๋„๋ก ๋งŒ๋“ค์–ด์ง„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์žˆ๋‹ค.

์กฐ๊ธˆ ๋ณต์žกํ•œ ์›น์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ๋•Œ MVC(Model, View, Controller) ๋””์ž์ธ ํŒจํ„ด์„ ๋งŽ์ด ์ด์šฉํ•˜๋Š”๋ฐ ์ด MVC๋Š” Model, View, Contoller ๊ฐ๊ฐ์˜ ๋ ˆ์ด๋Ÿฌ๋ฅผ ๋‚˜๋ˆ ์„œ ์ฝ”๋”ฉํ•ด๋‚˜๊ฐˆ ์ˆ˜ ์žˆ๋Š” ๋””์ž์ธ ํŒจํ„ด์„ ๋งํ•œ๋‹ค. ์ด ์ค‘์—์„œ๋„ React๋Š” MVC์˜ View ๋ ˆ์ด์–ด๋ฅผ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋‹ค.

๋‹ค์‹œ ํ•œ๋ฒˆ ์ •๋ฆฌํ•˜์ž๋ฉด, React๋ž€ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” ์ด ์œ ์ € ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

๐Ÿ”น ๊ธฐ์กด์˜ Frameworks ์™€ Libraries ์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ผ๊นŒ?

Frameworks (๋Œ€ํ‘œ์ ์œผ๋กœ Angular)

  • ์ง‘์„ ์ง“๋Š” ๊ณผ์ •์„ ๋น„์œ ํ•ด์„œ ์„ค๋ช…ํ•ด๋ณด์ž๋ฉด : ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ์ด๋ฏธ ์ง‘์˜ ๊ตฌ์กฐ๋‚˜ ์ฒ ์ œ๋“ค์ด ์™„์„ฑ๋œ ์ƒํƒœ์˜ ์™„์„ฑํ’ˆ์ด๋‹ค.

Framework์ธ ์•ต๊ทค๋Ÿฌ๋Š” UI ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ๋ผ์šฐํŒ…, ์Šคํ…Œ์ดํŠธ ๊ด€๋ฆฌ, http clients๋“ฑ ๊ต‰์žฅํžˆ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์ด ๋ฌถ์–ด์ ธ์„œ ์ œ๊ณต์ด ๋œ๋‹ค. ๊ทธ๋ž˜์„œ ์•ต๊ทค๋Ÿฌ๋ฅผ ์ด์šฉํ•ด์„œ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“œ๋ ค๋ฉด ์•ต๊ทค๋Ÿฌ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ด์šฉํ•ด์„œ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค. ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ์ •ํ•ด์ง„ ๊ณจ๊ฒฉ ์•ˆ์—์„œ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด์•ผ ํ•œ๋‹ค.

Libraries (UI๋ฅผ ๋‹ด๋‹นํ•˜๋Š” ๋Œ€ํ‘œ์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ React)

  • ์ง‘์„ ์ง“๋Š” ๊ณผ์ •์„ ๋น„์œ ํ•ด์„œ ์„ค๋ช…ํ•ด๋ณด์ž๋ฉด : ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ์žฌ๋ฃŒ๋“ค์„ ๊ณจ๋ผ์„œ ์šฐ๋ฆฌ์˜ ์ž…๋ง›์— ๋งž๊ฒŒ ์ง‘์„ ์ง€์„ ์ˆ˜ ์žˆ๋‹ค. ์ง‘์„ ์ง“๋Š” ์ž‘์€ ๋ถ€ํ’ˆ ํ•˜๋‚˜ ํ•˜๋‚˜๋ฅผ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ฐ๊ฐ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ž‘์€ ๋‹จ์œ„, ์ž‘์€ ๋„๋ฉ”์ธ ์•ˆ์—์„œ ์›ํ•˜๋Š” ์ž‘์€ ๋ถ€๋ถ„์„ ๊ตฌํ˜„ํ•œ ๊ฒƒ์„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ผ๊ณ  ํ•˜๋Š”๋ฐ ํ”„๋ ˆ์ž„ ์›Œํฌ์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ์ •ํ•ด์ง„ ๊ณจ๊ฒฉ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ตฌ์กฐ์˜ ์ง‘์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ณ  ์šฐ๋ฆฌ๊ฐ€ ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์— ๋”ฐ๋ผ์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ณจ๋ผ์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“ View๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ผ๊นŒ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ผ๊นŒ?

  • View๋Š” ์—„๋ฐ€ํžˆ ๋งํ•˜๋ฉด ํ”„๋ ˆ์ž„ ์›Œํฌ์— ํ•ด๋‹นํ•˜๋Š”๋ฐ, ์•ต๊ทค๋Ÿฌ ๋งŒํผ ๊ธฐ๋Šฅ๋“ค์„ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š๋‹ค. ๊ทธ๋ž˜์„œ ํ”„๋ ˆ์ž„์›Œํฌ์™€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ทธ ์ค‘๊ฐ„์ด๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ”น Frameworks VS Libraries

**Angular(Frameworks)**๋Š” ๋ฐฐ์šฐ๋Š”๋ฐ ์‹œ๊ฐ„์ด ๊ต‰์žฅํžˆ ์˜ค๋ž˜ ๊ฑธ๋ฆฐ๋‹ค. ํ•˜๋‚˜์˜ ์›น์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ ๋ฐฐ์›Œ์•ผ ํ•˜๋Š” ์ปจ์…‰๋“ค์ด ๊ต‰์žฅํžˆ ๋งŽ๋‹ค. ๋ฐ˜๋ฉด, **React(Libraries)**๋Š” ๋‹จ์ˆœํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋น„๊ต์  ์‹œ๊ฐ„์ด ์งง์€ ์‹œ๊ฐ„์— ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋‹ค.

React๋Š” ๋ฒ„์ „์ด ์—…๋ฐ์ดํŠธ ๋˜์–ด๋„ ์ด์ „ ๋ฒ„์ „๊ณผ ํ˜ธํ™˜์ด ์ž˜ ๋˜๋„๋ก ์•ˆ์ •์„ฑ ์žˆ๊ฒŒ ์—…๋ฐ์ดํŠธ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋‹ค. (๊ทธ๋ž˜์„œ ๋ฆฌ์•กํŠธ๊ฐ€ ์šฐ๋ฆฌ๊ฐ€ UI๋ฅผ ์ •๋ง ์‰ฝ๊ณ  ์žฌ๋ฏธ์žˆ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ผ ๊ฒƒ์ด๋‹ค.) ๋˜ํ•œ, ํŽ˜์ด์Šค๋ถ์—์„œ ๋งŒ๋“ค์–ด์ง„ ์ดํ›„๋กœ ๊ฐ•๋ ฅํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ํ˜•์„ฑ์ด ๋˜์–ด์ ธ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์„œํ™”๊ฐ€ ์ž˜ ๋˜์–ด์žˆ๋‹ค. ๊ฐœ๋ฐœ ์ค‘ ๋งž๋‹ฟ๋“œ๋ฆด ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค๋ฉด ์ด ์ปค๋ฎค๋‹ˆํ‹ฐ ์•ˆ์—์„œ ์ด๋ฏธ ํ•ด๊ฒฐ๋˜์–ด์ง„ ๋ฌธ์ œ์ผ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๊ฒฐ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์•„์ง„๋‹ค.

๋˜ํ•œ, React๋ฅผ ์ด์šฉํ•˜๋ฉด ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฟ๋งŒ์ด ์•„๋‹ˆ๋ผ, React Native ๋ฅผ ์ด์šฉํ•ด์„œ ๋ชจ๋ฐ”์ผ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜๋„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์œผ๋ฉฐ React + Electron ์„ ์ด์šฉํ•ด์„œ ๋ฐ์Šคํฌํƒ‘ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜๋„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ผ์„์‚ผ์กฐ์˜ ํšจ๊ณผ๋ฅผ ๋ˆ„๋ฆด ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, React ๋ฅผ ๋ฐฐ์›€์œผ๋กœ์จ ๊ธฐํšŒ๋น„์šฉ์ด ๋†’์•„์ง„๋‹ค.


๐Ÿ”น Components ๋ž€?

component๋Š” ํ•œ ๊ฐ€์ง€ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋Š” UI ๋‹จ์œ„๋ฅผ ๋งํ•œ๋‹ค. ๋˜ํ•œ,
์„œ๋กœ ๋…๋ฆฝ์ ์ด๊ณ , ์ž˜ ๊ณ ๋ฆฝ๋˜์–ด์ ธ ์žˆ์œผ๋ฉฐ, ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

๊ฐ๊ฐ์˜ React ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ๊ผญ ํ•˜๋‚˜์˜ component๋กœ ์ด๋ฃจ์–ด์ ธ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ œ์ผ ์ƒ์œ„์— ์กด์žฌํ•˜๋Š” component๋ฅผ root๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์žˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ๋งŒ๋“ค์–ด์ง„ ๊ฐ๊ฐ์˜ ๋…๋ฆฝ์ ์ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์กฐ๋ฆฝํ•ด์„œ ๋งŒ๋“ค์–ด๋†“์€ ๊ฒƒ์„ React ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋‹ค.

๐Ÿ”น Component์˜ Tree

์‚ฌ์šฉ์ž๊ฐ€ ์›นํŽ˜์ด์ง€๋ฅผ ๋ณด๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ž‘์„ฑํ•œ ์›นํŽ˜์ด์ง€๊ฐ€ DOM(Document Object Model) Tree๋กœ ๋ณ€ํ™˜๋œ๋‹ค. (๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์šฐ๋ฆฌ๊ฐ€ ์ž‘์„ฑํ•œ HTML Tag ๋“ค์ด ์ด DOM Tree๋กœ ๋ณ€ํ™˜์ด ๋˜์–ด์„œ ๋ธŒ๋ผ์šฐ์ €์— ํ‘œ๊ธฐ๊ฐ€ ๋œ๋‹ค.)
React์˜ Component๋„ Tree ํ˜•์‹์œผ๋กœ ๋งŒ๋“ค์–ด์ ธ ์žˆ๋‹ค.

๐Ÿ“ ๋‹ค์‹œ ์ •๋ฆฌ :
React๋Š” User Interface๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๊ณ , ์ด ๋ฆฌ์•กํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์›น์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ ๋‹ค๋Š” ๊ฒƒ์€ 'Coponent๋“ค์„ ๋งŒ๋“ ๋‹ค' ๋ผ๊ณ ๋„ ๋งํ•  ์ˆ˜ ์žˆ๋‹ค.
Component๋Š” ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ Component๋“ค์„ ๋ชจ์•„์„œ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ์›น์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ปดํฌ๋„ŒํŠธ๋Š” ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์™€๋Š” ๋…๋ฆฝ์ ์œผ๋กœ ๊ทธ ์ปดํฌ๋„ŒํŠธ์— ํ•ด๋‹นํ•˜๋Š” ๋กœ์ง๊ณผ ์Šคํ…Œ์ดํŠธ๊ฐ€ ๋“ค์–ด์žˆ๋‹ค.

๐Ÿ”น Component(class)์˜ ํ˜•ํƒœ

  • State object : component์— ๋“ค์–ด์žˆ๋Š” data๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.
  • render function : ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์งˆ ๊ฒƒ์ธ์ง€๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.

React๋Š” ์ด state๋ผ๋Š” ์˜ค๋ธŒ์ ํŠธ์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ์ž๋™์ ์œผ๋กœ render ํ•จ์ˆ˜๊ฐ€ ์ž๋™์ ์œผ๋กœ ๋ฐ˜๋ณต์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ-ํ˜ธ์ถœ์ด ๋œ๋‹ค.


๐Ÿ’ฌ ๊ทธ๋ ‡๋‹ค๋ฉด, Data๊ฐ€ ๋“ค์–ด์žˆ๋Š” ์ตœ์ƒ์œ„ component์˜ State๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค, ์ž์‹ component์˜ render ํ•จ์ˆ˜๋„ ๋งค๋ฒˆ ์—…๋ฐ์ดํŠธ-ํ˜ธ์ถœ์ด ๋ ๊นŒ?

๊ทธ๋ ‡๋‹ค. state ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ์ด ๋˜๋ฉด render ํ•จ์ˆ˜๊ฐ€ ๋‹ค์‹œ ์—…๋ฐ์ดํŠธ ํ˜ธ์ถœ์ด ๋˜๊ณ  ๋งŒ์•ฝ render ํ•จ์ˆ˜ ์•ˆ์— ์ž์‹child ์š”์†Œ์˜ component๊ฐ€ ๋“ค์–ด์žˆ๋‹ค๋ฉด ๊ทธ ์ž์‹๋“ค์˜ render ํ•จ์ˆ˜๋„ ๋‹ค์‹œ ์—…๋ฐ์ดํŠธ ํ˜ธ์ถœ์ด ๋œ๋‹ค.

๐Ÿ’ฌ ๊ทธ๋ ‡๋‹ค๋ฉด2, State๊ฐ€ ๋ณ€๊ฒฝ ๋  ๋•Œ๋งˆ๋‹ค ๋ชจ๋“  render ํ•จ์ˆ˜๊ฐ€ ๋‹ค์‹œ ํ˜ธ์ถœ์ด ๋˜๋Š” ๊ฑด ๋น„ํšจ์œจ์ ์ด์ง€ ์•Š์„๊นŒ?

๊ฒฐ๋ก ์ ์œผ๋กœ๋Š” ์•„๋‹ˆ๋‹ค. React์˜ ์„ฑ๋Šฅ์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋“ฑ์žฅํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ Virtual DOM(๊ฐ€์ƒ์˜ ๋”) ์ด๋‹ค.


๐Ÿ”น Virtual DOM(๊ฐ€์ƒ์˜ ๋”) Tree์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€

React๋„ React ๋งŒ์˜ Virtual Dom Tree๊ฐ€ ์žˆ๋‹ค. ๊ฐ€์ƒ์˜ DOM Tree๋กœ ๋ฆฌ์•กํŠธ์˜ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ๋ฉ”๋ชจ๋ฆฌ ์ƒ์— ๋ณด๊ด€์ด ๋˜์–ด์ ธ ์žˆ๋‹ค. ์ฆ‰, ๋ฐ”๋กœ ๋ฆฌ์•กํŠธ์˜ ๋ชจ๋“  ๊ตฌ์กฐ๋“ค์ด DOM Tree์— ์—…๋ฐ์ดํŠธ ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ์ปดํฌ๋„ŒํŠธ์— ๋ณ€๋™ ์‚ฌํ•ญ์ด ์ƒ๊ฒจ์„œ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— render ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ์ด ๋˜๋ฉด ์ด ๋ฆฌ์•กํŠธ๋Š” ์ด์ „์˜ Virtual Dom Tree์™€ ๋น„๊ตํ•ด์„œ ์‹ค์งˆ์ ์œผ๋กœ ์–ด๋–ค ๋ถ€๋ถ„์ด ์—…๋ฐ์ดํŠธ ๋˜์–ด์•ผ ํ•˜๋Š”์ง€ ๊ณ„์‚ฐ์„ ํ•œ ๋‹ค์Œ์— ์ •๋ง ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ DOM Tree์— ์—…๋ฐ์ดํŠธ๋ฅผ ํ•œ๋‹ค. ๊ทธ๋ž˜์„œ render ํ•จ์ˆ˜๊ฐ€ ์—ฌ๋Ÿฌ๋ฒˆ ์—…๋ฐ์ดํŠธ-ํ˜ธ์ถœ์ด ๋˜์–ด๋„ ์‹ค์งˆ์ ์œผ๋กœ ๋ณด์—ฌ์ง€๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๋™๋˜์ง€ ์•Š์œผ๋ฉด ์ด DOM Tree์—๋Š” ์ „ํ˜€ ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— render ํ•จ์ˆ˜๊ฐ€ ๋งŽ์ด ํ˜ธ์ถœ์ด ๋˜์–ด๋„ ์„ฑ๋Šฅ์„ ๊ฑฑ์ •ํ•˜์ง€ ์•Š์•„๋„ ๋  ๊ฒƒ์ด๋‹ค.

๐Ÿ”น React๋ฅผ ํ•œ๋ฌธ์žฅ ํ•œ ๋‹จ์–ด๋กœ ์„ค๋ช…ํ•œ๋‹ค๋ฉด?

  • ํ•œ ๋ฌธ์žฅ : React๋Š” user interface๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ์ฆ‰, ์›น UI๋ฅผ ๋งŒ๋“œ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.
  • ํ•œ ๋‹จ์–ด : components. ์ปดํฌ๋„ŒํŠธ๋“ค.

๐Ÿ”น React์˜ ์ค‘์š”ํ•œ ์ปจ์…‰ ๋‘๊ฐ€์ง€

  1. React๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ์ด ๋  ๋•Œ๋งˆ๋‹ค ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์ฒด๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋ง ํ•œ๋‹ค. (์‰ฝ๊ณ  ์žฌ๋ฐŒ๋Š” ์ด์œ )
    ๋ณ€๊ฒฝ์ด ๋  ๋•Œ๋งˆ๋‹ค ์—…๋ฐ์ดํŠธ ํ•ด์•ผํ•˜๋Š” ๊ฑฑ์ •์„ ํ•˜์ง€ ์•Š๊ณ , ๋‹ค๋งŒ state์— ๋งž๊ฒŒ render ํ•จ์ˆ˜์—์„œ ์–ด๋–ป๊ฒŒ ํ‘œ๊ธฐ๊ฐ€ ๋  ๊ฒƒ์ธ์ง€๋งŒ ์ •์˜๋ฅผ ํ•ด๋†“์œผ๋ฉด React๊ฐ€ ์•Œ์•„์„œ render๋ฅผ ํ˜ธ์ถœํ•ด์ค€๋‹ค.

  2. React ๋‚ด๋ถ€์—์„œ Virtual DOM(๊ฐ€์ƒ์˜ ๋”)๋ฅผ ๋ฉ”๋ชจ๋ฆฌ์— ๋ณด๊ด€ํ•ด๋†“๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์—…๋ฐ์ดํŠธ๊ฐ€ ์ผ์–ด๋‚  ๋•Œ๋งˆ๋‹ค ์ด์ „์˜ ํŠธ๋ฆฌ์™€ ๋น„๊ตํ•˜๊ณ  ๊ณ„์‚ฐํ•ด์„œ ์ •๋ง ์—…๋ฐ์ดํŠธ ๋˜๋Š” ๋‚ด์šฉ๋งŒ DOM Tree์— ์—…๋ฐ์ดํŠธ๋ฅผ ํ•œ๋‹ค. ๋˜ํ•œ, ๋งค๋ฒˆ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์—…๋ฐ์ดํŠธ ๋‚ด์šฉ์„ ๋ชจ์•„๋†จ๋‹ค๊ฐ€ ํ•œ๊บผ๋ฒˆ์— ์—…๋ฐ์ดํŠธ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์„ฑ๋Šฅ์„ ๋น ๋ฅด๊ฒŒ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ๋‹ค.


โœ”๏ธ ์ •๋ฆฌ

  • React๋Š” Component ๋‹จ์œ„๋กœ ์ด๋ฃจ์–ด์ง„ UI๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.
  • Component๋Š” ๋…๋ฆฝ์ ์ด๊ณ  ๊ณ ๋ฆฝ๋˜์–ด ์žˆ๊ณ  ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. (๊ทธ๋ž˜์„œ ํ…Œ์ŠคํŠธ์— ์šฉ์˜ํ•˜๋‹ค โ‡’ Unit Test)
  • Component๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” State object๊ฐ€ ์žˆ๊ณ , ์‚ฌ์šฉ์ž์—๊ฒŒ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์งˆ ๊ฒƒ์ธ์ง€ ์ •์˜ํ•˜๋Š” render ํ•จ์ˆ˜๊ฐ€ ์žˆ๋‹ค. state ์ƒํƒœ๊ฐ€ ๋ณ€ํ™”๋  ๋•Œ๋งˆ๋‹ค render ํ•จ์ˆ˜๊ฐ€ ์—…๋ฐ์ดํŠธ-ํ˜ธ์ถœ์ด ๋œ๋‹ค.
  • (๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ ) React๊ฐ€ ์„ฑ๋Šฅ์ด ์ข‹์€ ์ด์œ ๋Š” React ๋‚ด๋ถ€์˜ ๊ฐ€์ƒ์˜(Virtual) DOM์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
profile
N๊ฐœ์›”์ฐจ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž, Teta Min

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