YJzero 2022. 10. 10. 23:56

๐Ÿ“–์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฒƒ

1. React Elements

 : ํ™”๋ฉด์— ๋ณด์ด๋Š” ๊ฒƒ๋“ค์„ ๊ธฐ์ˆ 

 : Virtural DOM์— ์กด์žฌํ•˜๋Š” ๊ฒƒ์ด React Elements์ด๊ณ  ๋žœ๋”๋ง๋˜์–ด DOM Elements๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.  

 : ๋ถˆ๋ณ€์„ฑ = ์—˜๋ฆฌ๋จผํŠธ๋Š” ๋ถˆ๋ณ€์„ฑ์„ ๊ฐ€์ง€๊ธฐ ๋•Œ๋ฌธ์— ๋‚ด์šฉ์ด ๋ณ€๊ฒฝ๋˜๋ฉด ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ƒˆ๋กœ์šด ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ๊ต์ฒดํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

 

 

2. ๊ฐ์ฒด

 - new User๋ฅผ ์จ์„œ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค ๋•Œ ๋‚ด๋ถ€์ ์œผ๋กœ ์ผ์–ด๋‚˜๋Š” ์ผ

function User(name) {
  // this = {};  (๋นˆ ๊ฐ์ฒด๊ฐ€ ์•”์‹œ์ ์œผ๋กœ ๋งŒ๋“ค์–ด์ง)

  // ์ƒˆ๋กœ์šด ํ”„๋กœํผํ‹ฐ๋ฅผ this์— ์ถ”๊ฐ€ํ•จ
  this.name = name;
  this.isAdmin = false;

  // return this;  (this๊ฐ€ ์•”์‹œ์ ์œผ๋กœ ๋ฐ˜ํ™˜๋จ)
}

 

 -์ต๋ช… ์ƒ์„ฑ์ž ํ•จ์ˆ˜

  :let user = function(){ ... }

  :์ต๋ช… ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ์–ด๋””์—๋„ ์ €์žฅ๋˜์ง€ ์•Š์œผ๋ฉฐ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ณ  ํ•œ ๋ฒˆ๋งŒ ํ˜ธ์ถœํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. 

 

 

3. ์˜ต์…”๋„ ์ฒด์ด๋‹ '?.'

 :?.์•ž์˜ ๋Œ€์ƒ์ด undefined์ด๊ฑฐ๋‚˜ null์ด๋ฉด ํ‰๊ฐ€๋ฅผ ๋ฉˆ์ถ”๊ณ  undefined๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

 :์กด์žฌ์—ฌ๋ถ€๊ฐ€ ํ™•์‹คํ•˜์ง€ ์•Š์„ ๋•Œ, ์กด์žฌํ•˜์ง€ ์•Š์•„๋„ ๋˜๋Š” ๊ฐ’์ผ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

 :๊ผญ ์žˆ์–ด์•ผ ํ•˜๋Š” ๊ฐ’์— ์‚ฌ์šฉํ•˜๋ฉด ์—๋Ÿฌ๋ฅผ ์‰ฝ๊ฒŒ ์ฐพ์„ ์ˆ˜ ์—†์œผ๋ฏ€๋กœ xxx

 

 

4. ๋””๋ฐ”์šด์Šค์™€ ์“ฐ๋กœํ‹€๋ง

: ๋””๋ฐ”์ด์Šค์— ๋ฌด๋ฆฌ๋ฅผ ์ฃผ์ง€ ์•Š๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ์ตœ์ ํ™” ๊ธฐ๋ฒ•

 - ๋””๋ฐ”์šด์‹ฑ

 :์—ฐ์ด์–ด ์ผ์–ด๋‚˜๋Š” ์ด๋ฒคํŠธ๋ฅผ ํ•˜๋‚˜์˜ ๊ทธ๋ฃน์œผ๋กœ ๋ฌถ์–ด์„œ ์ฒ˜๋ฆฌ

 :์ด๋ฒคํŠธ ๊ฐ’์ด ๋ฐ”๋€Œ์—ˆ์„ ๋•Œ ํŠน์ • ์‹œ๊ฐ„๋™์•ˆ ํŒ๋‹จ์„ ์ง€์—ฐํ•˜๋‹ค๊ฐ€ ํŠน์ • ์‹œ๊ฐ„์ด ์ง€๋‚˜๊ณ  ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ํ•˜๋‚˜์˜ ์ด๋ฒคํŠธ๋กœ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ

 - ์“ฐ๋กœํ‹€๋ง

: ์—ฐ์ด์–ด ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ์— ๋Œ€ํ•ด ์ผ์ •ํ•œ delay๋ฅผ ํฌํ•จ์‹œ์ผœ delay ์‹œ๊ฐ„ ๋™์•ˆ ์ผ์–ด๋‚˜๋Š” ์ด๋ฒคํŠธ๋Š” ๋ฌด์‹œ

 

 

 

๐Ÿ’ญ๋ฐฐ์šด ์ 

์˜ค๋Š˜ ์ฃผ๋กœ ๊ณต๋ถ€ํ•œ ๊ฒƒ์€ ์Šคํ„ฐ๋””์—์„œ ์ง„ํ–‰ํ•˜๋Š” ๋ฆฌ์•กํŠธ ๊ฐ•์˜ ์ˆ˜๊ฐ•์ด์—ˆ๋‹ค. ๋ฆฌ์•กํŠธ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜๋Š” ๊ฑด 4๋ฒˆ์งธ์ธ ๊ฒƒ ๊ฐ™์€๋ฐ ์ด์ „๊ณผ ๋‹ฌ๋ฆฌ ์ข€ ๋” ์ด๋ก ์ ์ธ ๋‚ด์šฉ์ด๋ผ๋˜์ง€, ๋ฆฌ์•กํŠธ์˜ ์›๋ฆฌ ๊ฐ™์€ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์—ˆ๊ณ  ๊ณ„์† ์ œ๋Œ€๋กœ ๊ฐœ๋…์ด ์žกํžˆ์ง€ ์•Š์•˜๋˜ props์™€ state์— ๋Œ€ํ•ด ๊นจ๋‹ซ๊ฒŒ ๋˜์—ˆ๋‹ค.

๋ฆฌ์•กํŠธ v18์€ ๋ญ๊ฐ€ ๋‹ค๋ฅผ์ง€ ์•Œ์•„๋ณด๋‹ค๊ฐ€ ๋””๋ฐ”์šด์Šค์™€ ์“ฐ๋กœํ‹€๋ง์ด๋ผ๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ์ฒ˜์Œ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ์•„์ง ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๋Œ€ํ•ด์„œ๋„ ๋ชจ๋ฅด๋Š” ๊ฒŒ ๋„ˆ๋ฌด ๋งŽ์€ ๊ฒƒ ๊ฐ™๋‹ค. ๋ฆฌ์•กํŠธ v18 ์ •๋ฆฌ ๋‚ด์šฉ๋„ ์ฝ๋Š”๋ฐ..๋ญ” ์†Œ๋ฆด์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค ใ…Ž ์•„์ง ๋งŽ์€ hook์ด๋‚˜ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ด๋ณด์ง€ ์•Š์•„์„œ ๊ทธ๋Ÿฐ ๊ฒƒ ๊ฐ™๋‹ค. 

 

 

 

๐Ÿ”ฐ๊ฐœ์„ ํ•  ์ 

-์‹œ๊ฐ„์„ ํšจ์œจ์ ์œผ๋กœ ์“ฐ์ž. ๊ณต๋ถ€์‹œ๊ฐ„๊ณผ ํœด์‹์‹œ๊ฐ„์„ ์ œ๋Œ€๋กœ ์ •ํ•ด๋†“๋Š” ๊ฒŒ ๋‚˜์„ ๊ฒƒ ๊ฐ™๋‹ค.

-๊ฐ•์˜ํ•œ ๋‚ด์šฉ ๋ณต์Šตํ•˜์ž. ๊ฐ•์˜๋ณด๊ณ  ๋!์ด ์•„๋‹ˆ๋ผ ์–ด๋–ป๊ฒŒ ์‘์šฉํ•  ์ˆ˜ ์žˆ์„์ง€ ๋“ฑ ์ฝ”๋“œ ์•ˆ๋ณด๊ณ  ๋‹ค์‹œ ์ณ๋ณด๊ณ ํ•˜๋ฉด์„œ ๋ณต์Šตํ•˜์ž.

 

 

 

๐Ÿ’ป์•ž์œผ๋กœ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๊ฒƒ๋“ค

-๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ด์šฉํ•ด์„œ ํ…Œ์ŠคํŠธํ•˜๋Š” ๋ฒ•

-์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

-์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ๋Šฅ ๋†’์ด๋Š” ๋ฐฉ๋ฒ•

-๊นƒํ—™ ์ œ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•(ํ˜‘์—…๋ฐฉ๋ฒ•, ์ด์Šˆ ๋“ฑ...)