React: RFClarification: `setState`๊ฐ€ ๋น„๋™๊ธฐ์‹์ธ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2017๋…„ 11์›” 11์ผ  ยท  31์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/react

๊ฝค ์˜ค๋žซ๋™์•ˆ ๋‚˜๋Š” setState ๊ฐ€ ๋น„๋™๊ธฐ์‹์ธ ์ด์œ ๋ฅผ ์ดํ•ดํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ณผ๊ฑฐ์— ๋Œ€ํ•œ ๋‹ต์„ ์ฐพ์ง€ ๋ชปํ•ด ์—ญ์‚ฌ์  ์ด์œ ๋ผ ์ง€๊ธˆ์€ ๋ฐ”๊พธ๊ธฐ ์–ด๋ ต๋‹ค๋Š” ๊ฒฐ๋ก ์„ ๋‚ด๋ ธ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ @gaearon ๋‹˜์ด ๋ถ„๋ช…ํ•œ ์ด์œ ๊ฐ€ ์žˆ๋‹ค๊ณ 

์—ฌํ•˜ํŠผ ์ œ๊ฐ€ ์ž์ฃผ ๋“ฃ๋Š” ์ด์œ ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค๋งŒ, ๋Œ€์‘ํ•˜๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ์‰ฝ๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“  ๊ฒƒ์ด ๋  ์ˆ˜๋Š” ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋น„๋™๊ธฐ ๋ Œ๋”๋ง์—๋Š” ๋น„๋™๊ธฐ setState๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

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

Component.prototype.setState = (nextState) => {
  this.state = nextState
  if (!this.renderScheduled)
     setImmediate(this.forceUpdate)
}

์‹ค์ œ๋กœ ์˜ˆ๋ฅผ ๋“ค์–ด mobx-react ๋Š” ๊ด€์ฐฐ ๊ฐ€๋Šฅ ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ๋™๊ธฐ ํ• ๋‹น์„ ํ—ˆ์šฉํ•˜๊ณ  ์—ฌ์ „ํžˆ ๋ Œ๋”๋ง์˜ ๋น„๋™๊ธฐ ํŠน์„ฑ์„ ์กด์ค‘ํ•ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ์ƒํƒœ๊ฐ€ _rendered_์ธ์ง€ ์•Œ๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋น„๋™๊ธฐ setState๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ๊ฐ€๋” ๋“ฃ๋Š” ๋˜ ๋‹ค๋ฅธ ์ฃผ์žฅ์€ _์š”์ฒญ๋œ_ ์ƒํƒœ๊ฐ€ ์•„๋‹ˆ๋ผ _๋ Œ๋”๋ง๋œ_ ์ƒํƒœ์— ๋Œ€ํ•ด ์ถ”๋ก ํ•˜๊ธฐ๋ฅผ ์›ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ์›์น™๋„ ํฐ ์žฅ์ ์ด ์žˆ๋Š”์ง€ ํ™•์‹ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ฐœ๋…์ ์œผ๋กœ ๊ทธ๊ฒƒ์€ ๋‚˜์—๊ฒŒ ์ด์ƒํ•˜๊ฒŒ ๋Š๊ปด์ง„๋‹ค. ๋ Œ๋”๋ง์€ ๋ถ€์ž‘์šฉ์ด๊ณ  ์ƒํƒœ๋Š” ์‚ฌ์‹ค์— ๊ด€ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ˜„์žฌ ์ €๋Š” 32์‚ด์ด๊ณ , ์†Œ์œ ํ•˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์˜ฌํ•ด ๋‹ค์‹œ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€์— ๊ด€๊ณ„์—†์ด ๋‚ด๋…„์—๋Š” 33์‚ด์ด ๋ฉ๋‹ˆ๋‹ค. :)

(์•„๋งˆ ์ข‹์ง€ ์•Š์€) ํ‰ํ–‰์„ ์„ ๊ทธ๋ฆฌ๋ ค๋ฉด: ์ž๊ฐ€ ์ž‘์„ฑ ๋‹จ์–ด ๋ฌธ์„œ์˜ ๋งˆ์ง€๋ง‰ ๋ฒ„์ „์„ ์ธ์‡„ํ•  ๋•Œ๊นŒ์ง€ _์ฝ์„ ์ˆ˜ ์—†๋‹ค๋ฉด ๊ทธ๊ฒƒ์€ ๊ฝค ์–ด์ƒ‰ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๊ฒŒ์ž„ ์—”์ง„์ด ๊ฒŒ์ž„์˜ ์–ด๋–ค ์ƒํƒœ๊ฐ€ ์ •ํ™•ํžˆ ๋ Œ๋”๋ง๋˜์—ˆ๊ณ  ์–ด๋–ค ํ”„๋ ˆ์ž„์ด ์‚ญ์ œ๋˜์—ˆ๋Š”์ง€์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

ํฅ๋ฏธ๋กœ์šด ๊ด€์ฐฐ: 2๋…„ ๋™์•ˆ mobx-react ์•„๋ฌด๋„ ๋‚˜์—๊ฒŒ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์งˆ๋ฌธ์„ ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๊ด€์ฐฐ ๊ฐ€๋Šฅ ํ•ญ๋ชฉ์ด ๋ Œ๋”๋ง๋˜์—ˆ๋Š”์ง€ ์–ด๋–ป๊ฒŒ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์ด ์งˆ๋ฌธ์€ ๊ทธ๋‹ค์ง€ ์ž์ฃผ ๊ด€๋ จ์ด ์—†๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์–ด๋–ค ๋ฐ์ดํ„ฐ๊ฐ€ ๋ Œ๋”๋ง๋˜์—ˆ๋Š”์ง€ ์•„๋Š” ๊ฒƒ์ด ๊ด€๋ จ์ด ์žˆ๋Š” ๋ช‡ ๊ฐ€์ง€ ์‚ฌ๋ก€๋ฅผ ์ ‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ๊ธฐ์–ตํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ๋ ˆ์ด์•„์›ƒ ๋ชฉ์ ์œผ๋กœ ์ผ๋ถ€ ๋ฐ์ดํ„ฐ์˜ ํ”ฝ์…€ ์น˜์ˆ˜๋ฅผ ์•Œ์•„์•ผ ํ–ˆ๋˜ ๊ฒฝ์šฐ์˜€์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๊ฒƒ์€ didComponentUpdate ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์šฐ์•„ํ•˜๊ฒŒ ํ•ด๊ฒฐ๋˜์—ˆ์œผ๋ฉฐ ์‹ค์ œ๋กœ setState ๊ฐ€ ๋น„๋™๊ธฐํ™”๋˜๋Š” ๋ฐ์—๋„ ์˜์กดํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฒฝ์šฐ๋Š” ๋งค์šฐ ๋“œ๋ฌผ๊ธฐ ๋•Œ๋ฌธ์— ์ฃผ๋กœ ์ฃผ๋ณ€์— API๋ฅผ ์„ค๊ณ„ํ•˜๋Š” ๊ฒƒ์ด ๊ฑฐ์˜ ์ •๋‹นํ™”๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์–ด๋–ป๊ฒŒ๋“  ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๊ทธ๊ฒƒ์œผ๋กœ ์ถฉ๋ถ„ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ด


๋‚˜๋Š” React ํŒ€์ด setState ์˜ ๋น„๋™๊ธฐ ํŠน์„ฑ์ด ์ž์ฃผ ๋„์ž…ํ•˜๋Š” ํ˜ผ๋ž€์„ ์•Œ๊ณ  ์žˆ๋‹ค๋Š” ๋ฐ ์˜์‹ฌ์˜ ์—ฌ์ง€๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ˜„์žฌ ์˜๋ฏธ ์ฒด๊ณ„์— ๋˜ ๋‹ค๋ฅธ ์•„์ฃผ ์ข‹์€ ์ด์œ ๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋” ๋ง ํ•ด์ฃผ์„ธ์š” :)

Discussion

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์—ฌ๊ธฐ์— ๋ช‡ ๊ฐ€์ง€ ์ƒ๊ฐ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์–ด๋–ค ๋ฐฉ๋ฒ•์œผ๋กœ๋“  ์™„์ „ํ•œ ์‘๋‹ต์€ ์•„๋‹ˆ์ง€๋งŒ ์•„๋งˆ๋„ ์•„๋ฌด ๋ง๋„ ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ๋ณด๋‹ค ์—ฌ์ „ํžˆ ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ฒซ์งธ, ์ผ๊ด„ ์—…๋ฐ์ดํŠธ๋ฅผ ์œ„ํ•ด ์กฐ์ • ์„ ์ง€์—ฐํ•˜๋Š” ๊ฒƒ์ด ์œ ์ตํ•˜๋‹ค๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, setState() ๋™๊ธฐ์‹์œผ๋กœ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒƒ์€ ๋งŽ์€ ๊ฒฝ์šฐ์— ๋น„ํšจ์œจ์ ์ด๋ฉฐ ์—ฌ๋Ÿฌ ์—…๋ฐ์ดํŠธ๋ฅผ ์–ป์„ ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•ˆ๋‹ค๋ฉด ์ผ๊ด„ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜๋Š” ๊ฒƒ์ด ๋” ๋‚ซ๋‹ค๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๋ธŒ๋ผ์šฐ์ € click ํ•ธ๋“ค๋Ÿฌ ๋‚ด๋ถ€์— ์žˆ๊ณ  Child ๋ฐ Parent setState ํ˜ธ์ถœํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Child ๋‘ ๋ฒˆ, ๋Œ€์‹  ๋”ํ‹ฐ๋กœ ํ‘œ์‹œํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ € ์ด๋ฒคํŠธ๋ฅผ ์ข…๋ฃŒํ•˜๊ธฐ ์ „์— ํ•จ๊ป˜ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.

๋™์ผํ•œ ์ž‘์—…(์ผ๊ด„ ์ฒ˜๋ฆฌ)์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์—†์ง€๋งŒ ์กฐ์ •์ด ๋๋‚  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ณ  setState ์—…๋ฐ์ดํŠธ๋ฅผ this.state ์ฆ‰์‹œ ์ž‘์„ฑํ•  ์ˆ˜ ์—†๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋‚˜๋Š” ํ•˜๋‚˜์˜ ๋ถ„๋ช…ํ•œ ๋‹ต์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์ง€๋งŒ(๋‘ ์†”๋ฃจ์…˜ ๋ชจ๋‘ ์žฅ๋‹จ์ ์ด ์žˆ์Œ) ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ช‡ ๊ฐ€์ง€ ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด๋ถ€ ์ผ๊ด€์„ฑ ๋ณด์žฅ

ํ•ด๋„ state ๋™ ๊ธฐ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค props ์—†์Šต๋‹ˆ๋‹ค. (๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๊ธฐ ์ „์—๋Š” props ์•Œ ์ˆ˜ ์—†์œผ๋ฉฐ, ์ด๋ฅผ ๋™๊ธฐ์ ์œผ๋กœ ์ˆ˜ํ–‰ํ•˜๋ฉด ์ผ๊ด„ ์ฒ˜๋ฆฌ๊ฐ€ ์ฐฝ ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ‘๋‹ˆ๋‹ค.)

ํ˜„์žฌ React์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ฐ์ฒด( state , props , refs )๋Š” ๋‚ด๋ถ€์ ์œผ๋กœ ์„œ๋กœ

์ƒํƒœ๋งŒ ์‚ฌ์šฉํ•  ๋•Œ ๋™๊ธฐ์  ์œผ๋กœ

console.log(this.state.value) // 0
this.setState({ value: this.state.value + 1 });
console.log(this.state.value) // 1
this.setState({ value: this.state.value + 1 });
console.log(this.state.value) // 2

๊ทธ๋Ÿฌ๋‚˜ ๋ช‡ ๊ฐ€์ง€ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ๊ณต์œ ํ•˜๋ ค๋ฉด ์ด ์ƒํƒœ๋ฅผ ํ•ด์ œํ•ด์•ผ ์ƒ์œ„ ํ•ญ๋ชฉ์œผ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

-this.setState({ value: this.state.value + 1 });
+this.props.onIncrement(); // Does the same thing in a parent

setState() ์— ์˜์กดํ•˜๋Š” ์ผ๋ฐ˜์ ์ธ React ์•ฑ ์—์„œ ์ด๊ฒƒ์ด ์ผ์ƒ์ ์œผ๋กœ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ React ํŠน์ • ๋ฆฌํŒฉํ† ๋ง ์œ ํ˜• ์ด๋ผ๋Š” ์ ์„ ๊ฐ•์กฐํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์€ ์šฐ๋ฆฌ์˜ ์ฝ”๋“œ๋ฅผ ๊นจ๋œจ๋ฆฝ๋‹ˆ๋‹ค!

console.log(this.props.value) // 0
this.props.onIncrement();
console.log(this.props.value) // 0
this.props.onIncrement();
console.log(this.props.value) // 0

์ด๋Š” ์ œ์•ˆํ•œ ๋ชจ๋ธ์—์„œ this.state ๊ฐ€ ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ๋˜์ง€๋งŒ this.props ๋Š” ํ”Œ๋Ÿฌ์‹œ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ถ€๋ชจ๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜์ง€ ์•Š๊ณ ๋Š” this.props ๋ฅผ ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ฆ‰, ์ผ๊ด„ ์ฒ˜๋ฆฌ๋ฅผ ํฌ๊ธฐํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค(๊ฒฝ์šฐ์— ๋”ฐ๋ผ ์„ฑ๋Šฅ์ด ๋งค์šฐ ํฌ๊ฒŒ ์ €ํ•˜๋  ์ˆ˜ ์žˆ์Œ).

์˜ˆ๋ฅผ ๋“ค์–ด props (์•„์ง ํ”Œ๋Ÿฌ์‹œ๋˜์ง€ ์•Š์Œ) ๋ฐ state (์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ๋˜๋„๋ก ์ œ์•ˆ๋จ)์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ˜ผํ•ฉํ•˜์—ฌ ์ƒˆ ์ƒํƒœ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒฝ์šฐ์™€ ๊ฐ™์ด ์ด๊ฒƒ์ด ์–ด๋–ป๊ฒŒ ๊นจ์งˆ ์ˆ˜ ์žˆ๋Š”์ง€์— ๋Œ€ํ•œ ๋” ๋ฏธ๋ฌ˜ํ•œ ๊ฒฝ์šฐ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. : https://github.com/facebook/react/issues/122#issuecomment -81856416. ์ฐธ์กฐ๋Š” ๋™์ผํ•œ ๋ฌธ์ œ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค: https://github.com/facebook/react/issues/122#issuecomment -22659651.

์ด๋Ÿฌํ•œ ์˜ˆ๋Š” ์ „ํ˜€ ์ด๋ก ์ ์ธ ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ React Redux ๋ฐ”์ธ๋”ฉ์€ React props์™€ non-React ์ƒํƒœ๋ฅผ ํ˜ผํ•ฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ •ํ™•ํžˆ ์ด๋Ÿฐ ์ข…๋ฅ˜์˜ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. https://github.com/reactjs/react-redux/issues/86 , https://github.com/ reactjs/react-redux/pull/99 , https://github.com/reactjs/react-redux/issues/292 , https://github.com/reactjs/redux/issues/1415 , https://github. com/reactjs/react-redux/issues/525.com/reactjs/react-redux/issues/525.

MobX ์‚ฌ์šฉ์ž๊ฐ€ ์ด ๋ฌธ์ œ์— ๋ถ€๋”ชํžˆ์ง€ ์•Š์€ ์ด์œ ๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ๋‚ด ์ง๊ด€์€ ๊ทธ๋“ค์ด ๊ทธ๋Ÿฌํ•œ ์‹œ๋‚˜๋ฆฌ์˜ค์— ๋ถ€๋”ชํž ์ˆ˜ ์žˆ์ง€๋งŒ ์ž์‹ ์˜ ์ž˜๋ชป์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์•„๋‹ˆ๋ฉด props ์—์„œ ๋งŽ์ด ์ฝ์ง€ ์•Š๊ณ  ๋Œ€์‹  MobX ๊ฐ€๋ณ€ ๊ฐ์ฒด์—์„œ ์ง์ ‘ ์ฝ์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ์˜ค๋Š˜๋‚  React๋Š” ์ด๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ• ๊นŒ์š”? React์—์„œ this.state ๋ฐ this.props ๋ชจ๋‘ ์กฐ์ • ๋ฐ ํ”Œ๋Ÿฌ์‹œ ํ›„์—๋งŒ ์—…๋ฐ์ดํŠธ๋˜๋ฏ€๋กœ ๋ฆฌํŒฉํ† ๋ง ์ „ํ›„์— 0 ๊ฐ€ ์ธ์‡„๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋ฆฌํ”„ํŒ… ์ƒํƒœ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

์˜ˆ, ๊ฒฝ์šฐ์— ๋”ฐ๋ผ ๋ถˆํŽธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ ํ•œ ๊ณณ์—์„œ ์™„์ „ํ•œ ์ƒํƒœ ์—…๋ฐ์ดํŠธ ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ƒ๊ฐํ•˜๋Š” ๋Œ€์‹  ์ƒํƒœ๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ๋ณ€๊ฒฝํ•˜๋ ค๋Š” ๋” ๋งŽ์€ OO ๋ฐฐ๊ฒฝ์—์„œ ์˜ค๋Š” ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•ด. ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ ์ง‘์ค‘์ ์œผ๋กœ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ๋””๋ฒ„๊น… ๊ด€์ ์—์„œ ๋” ๋ช…ํ™•ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ https://github.com/facebook/react/issues/122#issuecomment -19888472์— ๊ณต๊ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์—ฌ์ „ํžˆ, ํŠนํžˆ ๋ Œ๋”๋ง์„ ์œ„ํ•œ ์ง„์‹ค ์†Œ์Šค๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ์ฝ๊ณ  ์‹ถ์€ ์ƒํƒœ๋ฅผ ์˜†์œผ๋กœ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ์ผ๋ถ€ ๊ฐ์ฒด๋กœ ์ฆ‰์‹œ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ MobX๊ฐ€ ๋‹น์‹ ์ด ํ•  ์ˆ˜ ์žˆ๋Š” ์ผ์ž…๋‹ˆ๋‹ค ๐Ÿ™‚.

๋˜ํ•œ ์ˆ˜ํ–‰ ์ค‘์ธ ์ž‘์—…์„ ์•Œ๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ ์ „์ฒด ํŠธ๋ฆฌ ๋ฅผ ReactDOM.flushSync(fn) ์ž…๋‹ˆ๋‹ค. ์•„์ง ๋ฌธ์„œํ™”ํ•˜์ง€ ์•Š์•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ 16.x ๋ฆด๋ฆฌ์Šค ์ฃผ๊ธฐ ์ค‘ ์–ธ์  ๊ฐ€๋Š” ๋ฌธ์„œํ™”ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ๋Š” ํ˜ธ์ถœ ๋‚ด๋ถ€์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์—…๋ฐ์ดํŠธ์— ๋Œ€ํ•ด ์™„์ „ํ•œ ์žฌ๋ Œ๋”๋ง์„ ๊ฐ•์ œ ์‹คํ–‰ํ•˜๋ฏ€๋กœ ๋งค์šฐ ๋“œ๋ฌผ๊ฒŒ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด props , state ๋ฐ refs ์‚ฌ์ด์˜ ๋‚ด๋ถ€ ์ผ๊ด€์„ฑ ๋ณด์žฅ์ด ๊นจ์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์š”์•ฝํ•˜์ž๋ฉด, React ๋ชจ๋ธ์€ ํ•ญ์ƒ ๊ฐ€์žฅ ๊ฐ„๊ฒฐํ•œ ์ฝ”๋“œ๋กœ ์ด์–ด์ง€์ง€๋Š” ์•Š์ง€๋งŒ ๋‚ด๋ถ€์ ์œผ๋กœ ์ผ๊ด€์„ฑ์ด ์žˆ๊ณ  ์ƒํƒœ๋ฅผ ์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์ด ์•ˆ์ „ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค .

๋™์‹œ ์—…๋ฐ์ดํŠธ ํ™œ์„ฑํ™”

๊ฐœ๋…์ ์œผ๋กœ React๋Š” ๊ตฌ์„ฑ ์š”์†Œ๋‹น ํ•˜๋‚˜์˜ ์—…๋ฐ์ดํŠธ ๋Œ€๊ธฐ์—ด์ด ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋…ผ์˜๊ฐ€ ์ „ํ˜€ ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ๊ฐ€ ์ •ํ™•ํ•œ ์ˆœ์„œ๋กœ ์ ์šฉ๋  ๊ฒƒ์ด๋ผ๋Š” ๋ฐ ์˜์‹ฌ์˜ ์—ฌ์ง€๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— this.state ์—…๋ฐ์ดํŠธ๋ฅผ ์ฆ‰์‹œ ์ ์šฉํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ๋…ผ์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๋Ÿด ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค( ํ•˜ํ•˜ ).

์ตœ๊ทผ์— ์šฐ๋ฆฌ๋Š” "๋น„๋™๊ธฐ ๋ Œ๋”๋ง"์— ๋Œ€ํ•ด ๋งŽ์ด ์ด์•ผ๊ธฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๊ทธ๊ฒƒ์ด ์˜๋ฏธํ•˜๋Š” ๋ฐ”๋ฅผ ์ž˜ ์ „๋‹ฌํ•˜์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ๊ฒƒ์„ ์ธ์ •ํ•˜์ง€๋งŒ ๊ทธ๊ฒƒ์ด R&D์˜ ํŠน์„ฑ์ž…๋‹ˆ๋‹ค. ๊ฐœ๋…์ ์œผ๋กœ ์œ ๋งํ•ด ๋ณด์ด๋Š” ์•„์ด๋””์–ด๋ฅผ ์ถ”๊ตฌํ•˜์ง€๋งŒ ์ถฉ๋ถ„ํ•œ ์‹œ๊ฐ„์„ ๋ณด๋‚ธ ํ›„์—์•ผ ๊ทธ ์˜๋ฏธ๋ฅผ ์ง„์ •์œผ๋กœ ์ดํ•ดํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

"๋น„๋™๊ธฐ ๋ Œ๋”๋ง"์„ ์„ค๋ช…ํ•˜๋Š” ํ•œ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์€ React๊ฐ€ setState() ํ˜ธ์ถœ์˜ ์ถœ์ฒ˜(์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ, ๋„คํŠธ์›Œํฌ ์‘๋‹ต, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋“ฑ)์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์šฐ์„  ์ˆœ์œ„๋ฅผ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค .

์˜ˆ๋ฅผ ๋“ค์–ด ๋ฉ”์‹œ์ง€๋ฅผ ์ž…๋ ฅํ•˜๋Š” ๊ฒฝ์šฐ TextBox ๊ตฌ์„ฑ ์š”์†Œ์˜ setState() ํ˜ธ์ถœ์€ ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ž…๋ ฅํ•˜๋Š” ๋™์•ˆ ์ƒˆ ๋ฉ”์‹œ์ง€๊ฐ€ ์ˆ˜์‹ ๋˜๋ฉด ์ƒˆ MessageBubble ๋ Œ๋”๋ง์„ ํŠน์ • ์ž„๊ณ„๊ฐ’(์˜ˆ: 1์ดˆ)๊นŒ์ง€ ์ง€์—ฐ์‹œํ‚ค๋Š” ๊ฒƒ์ด ์‹ค.

ํŠน์ • ์—…๋ฐ์ดํŠธ๊ฐ€ "๋‚ฎ์€ ์šฐ์„  ์ˆœ์œ„"๋ฅผ ๊ฐ–๋„๋ก ํ•˜๋ฉด ๋ Œ๋”๋ง์„ ๋ช‡ ๋ฐ€๋ฆฌ์ดˆ์˜ ์ž‘์€ ๋ฉ์–ด๋ฆฌ๋กœ ๋ถ„ํ• ํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ˆˆ์— ๋„์ง€ ์•Š๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์™€ ๊ฐ™์€ ์„ฑ๋Šฅ ์ตœ์ ํ™”๊ฐ€ ๊ทธ๋‹ค์ง€ ํฅ๋ฏธ๋กญ๊ฑฐ๋‚˜ ์„ค๋“๋ ฅ์ด ์—†์„ ์ˆ˜๋„ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. "MobX์—์„œ๋Š” ์ด๊ฒƒ์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ ์ถ”์ ์€ ์žฌ๋ Œ๋”๋ง์„ ํ”ผํ•˜๊ธฐ์— ์ถฉ๋ถ„ํžˆ ๋น ๋ฆ…๋‹ˆ๋‹ค."๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์ด ๋ชจ๋“  ๊ฒฝ์šฐ์— ์‚ฌ์‹ค์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค(์˜ˆ๋ฅผ ๋“ค์–ด, MobX๊ฐ€ ์•„๋ฌด๋ฆฌ ๋นจ๋ผ๋„ ์—ฌ์ „ํžˆ DOM ๋…ธ๋“œ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์ƒˆ๋กœ ๋งˆ์šดํŠธ๋œ ๋ทฐ์— ๋Œ€ํ•œ ๋ Œ๋”๋ง์„ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค). ๊ทธ๋ž˜๋„ ๊ทธ๊ฒƒ์ด ์‚ฌ์‹ค์ด๊ณ  ์ฝ๊ธฐ ๋ฐ ์“ฐ๊ธฐ๋ฅผ ์ถ”์ ํ•˜๋Š” ํŠน์ • JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๊ฐœ์ฒด๋ฅผ ํ•ญ์ƒ ๋ž˜ํ•‘ํ•ด๋„ ๊ดœ์ฐฎ๋‹ค๊ณ  ์˜์‹์ ์œผ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค๋ฉด ์ด๋Ÿฌํ•œ ์ตœ์ ํ™”์˜ ์ด์ ์„ ๋งŽ์ด ๋ˆ„๋ฆฌ์ง€ ๋ชปํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋น„๋™๊ธฐ ๋ Œ๋”๋ง์€ ์„ฑ๋Šฅ ์ตœ์ ํ™”์— ๊ด€ํ•œ ๊ฒƒ๋งŒ์ด ์•„๋‹™๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ํ•œ ํ™”๋ฉด์—์„œ ๋‹ค๋ฅธ ํ™”๋ฉด์œผ๋กœ ์ด๋™ํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ์ƒ๊ฐํ•ด ๋ณด์‹ญ์‹œ์˜ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ƒˆ ํ™”๋ฉด์ด ๋ Œ๋”๋ง๋˜๋Š” ๋™์•ˆ ์Šคํ”ผ๋„ˆ๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ํƒ์ƒ‰์ด ์ถฉ๋ถ„ํžˆ ๋น ๋ฅธ ๊ฒฝ์šฐ(์•ฝ 1์ดˆ ์ด๋‚ด) ์Šคํ”ผ๋„ˆ๋ฅผ ๊นœ๋ฐ•์ด๊ณ  ์ฆ‰์‹œ ์ˆจ๊ธฐ๋ฉด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ์ €ํ•˜๋ฉ๋‹ˆ๋‹ค. ์„ค์ƒ๊ฐ€์ƒ์œผ๋กœ ์„œ๋กœ ๋‹ค๋ฅธ ๋น„๋™๊ธฐ ์ข…์†์„ฑ(๋ฐ์ดํ„ฐ, ์ฝ”๋“œ, ์ด๋ฏธ์ง€)์„ ๊ฐ€์ง„ ์—ฌ๋Ÿฌ ์ˆ˜์ค€์˜ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ํ•˜๋‚˜์”ฉ ์งง๊ฒŒ ๊นœ๋ฐ•์ด๋Š” ์ผ๋ จ์˜ ์Šคํ”ผ๋„ˆ๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์‹œ๊ฐ์ ์œผ๋กœ ๋ถˆ์พŒํ•˜๊ณ  ๋ชจ๋“  DOM ๋ฆฌํ”Œ๋กœ์šฐ ๋•Œ๋ฌธ์— ์‹ค์ œ๋กœ ์•ฑ์„ ๋Š๋ฆฌ๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋งŽ์€ ์ƒ์šฉ๊ตฌ ์ฝ”๋“œ์˜ ์†Œ์Šค์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ๋ณด๊ธฐ๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๊ฐ„๋‹จํ•œ setState() ๋ฅผ ์ˆ˜ํ–‰ํ•  ๋•Œ ์—…๋ฐ์ดํŠธ๋œ ๋ณด๊ธฐ ๋ Œ๋”๋ง์„ "๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ" "์‹œ์ž‘"ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ข‹์ง€ ์•Š์„๊นŒ์š”? ์กฐ์ • ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ  ์—…๋ฐ์ดํŠธ๊ฐ€ ํŠน์ • ์ž„๊ณ„๊ฐ’(์˜ˆ: 1์ดˆ) ์ด์ƒ ์†Œ์š”๋˜๋ฉด ์Šคํ”ผ๋„ˆ๋ฅผ ํ‘œ์‹œํ•˜๋„๋ก ์„ ํƒํ•˜๊ณ  ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์ „์ฒด ์ƒˆ ํ•˜์œ„ ํŠธ๋ฆฌ์˜ ๋น„๋™๊ธฐ ์ข…์†์„ฑ์ด ๋‹ค์Œ๊ณผ ๊ฐ™์„ ๋•Œ React๊ฐ€ ์›ํ™œํ•œ ์ „ํ™˜์„ ์ˆ˜ํ–‰ํ•˜๋„๋ก ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ์ƒํ•ด ๋ณด์‹ญ์‹œ์˜ค.

ํ˜„์žฌ React ๋ชจ๋ธ๊ณผ ์ˆ˜๋ช… ์ฃผ๊ธฐ์— ๋Œ€ํ•œ ์•ฝ๊ฐ„์˜ ์กฐ์ •์œผ๋กœ ์šฐ๋ฆฌ๋Š” ์‹ค์ œ๋กœ ์ด๊ฒƒ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค! @acdlite ๋Š” ์ง€๋‚œ ๋ช‡ ์ฃผ ๋™์•ˆ ์ด ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด RFC ๋ฅผ ๊ฒŒ์‹œํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ this.state ๊ฐ€ ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ๋˜๋ฉด "์ด์ „ ๋ฒ„์ „"์ด ์—ฌ์ „ํžˆ ํ‘œ์‹œ๋˜๊ณ  ๋Œ€ํ™”ํ˜•์ธ ๋™์•ˆ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ๋ณด๊ธฐ์˜ "์ƒˆ ๋ฒ„์ „" ๋ Œ๋”๋ง์„ ์‹œ์ž‘ํ•  ๋ฐฉ๋ฒ•์ด ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค์˜ ๋…๋ฆฝ์ ์ธ ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋Š” ์ถฉ๋Œํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด ๋ชจ๋“  ๊ฒƒ์„ ๋ฐœํ‘œํ•˜๋Š” ๊ฒƒ๊ณผ ๊ด€๋ จํ•˜์—ฌ @acdlite ์˜ ์ฒœ๋‘ฅ์„ ํ›”์น˜๊ณ  ์‹ถ์ง€๋Š” ์•Š์ง€๋งŒ ์ด๊ฒƒ์ด ์ ์–ด๋„ ์กฐ๊ธˆ์€ ํฅ๋ฏธ๋กญ๊ฒŒ ๋“ค๋ฆฌ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์ด ์—ฌ์ „ํžˆ ๊ธฐํฌ์ฒ˜๋Ÿผ ๋“ค๋ฆด ์ˆ˜ ์žˆ๊ฑฐ๋‚˜ ์šฐ๋ฆฌ๊ฐ€ ๋ฌด์—‡์„ ํ•˜๊ณ  ์žˆ๋Š”์ง€ ์ •๋ง๋กœ ๋ชจ๋ฅด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋“ค๋ฆด ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์šฐ๋ฆฌ๊ฐ€ ์•ž์œผ๋กœ ๋ช‡ ๋‹ฌ ์•ˆ์— ๋‹น์‹ ์„ ์„ค๋“ํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‹น์‹ ์ด React ๋ชจ๋ธ์˜ ์œ ์—ฐ์„ฑ์— ๊ฐ์‚ฌํ•˜๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‚ด๊ฐ€ ์ดํ•ดํ•˜๋Š” ํ•œ, ์ ์–ด๋„ ๋ถ€๋ถ„์ ์œผ๋กœ๋Š” ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฌํ•œ ์œ ์—ฐ์„ฑ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  31 ๋Œ“๊ธ€

๋ชจ๋‘ ๊ธฐ๋‹ค ๋ฆฝ๋‹ˆ๋‹ค @gaearon .

@Kaybarax ์•ˆ๋…•ํ•˜์„ธ์š” ์ฃผ๋ง์ž…๋‹ˆ๋‹ค ;-)

@mweststrate ์˜ค! ๋‚ด ์ž˜๋ชป์ด์•ผ. ์‹œ์›ํ•œ.

๋‚˜๋Š” ์—ฌ๊ธฐ์—์„œ ์‚ฌ์ง€ ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ€์„œ ๋™์ผํ•œ ํ‹ฑ์—์„œ ์—ฌ๋Ÿฌ setState ๋ฅผ ์ผ๊ด„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋ผ๊ณ  ๋งํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์ฃผ์— ํœด๊ฐ€๋ฅผ ๊ฐ€๋Š”๋ฐ ํ™”์š”์ผ์— ๊ฐˆ ๊ฒƒ ๊ฐ™์•„์„œ ์›”์š”์ผ์— ๋‹ต์žฅ์„ ๋ณด๋‚ด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ•จ์ˆ˜ enqueueUpdate(๊ตฌ์„ฑ ์š”์†Œ) {
๋ณด์žฅ ์ฃผ์ž…();

// ์ฝ”๋“œ์˜ ๋‹ค์–‘ํ•œ ๋ถ€๋ถ„(์˜ˆ: ReactCompositeComponent์˜
// _renderValidatedComponent) ๋ Œ๋”๋ง ํ˜ธ์ถœ์ด ์ค‘์ฒฉ๋˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.
// ์ด ๊ฒฝ์šฐ์ธ์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. (์ด๊ฒƒ์€ ๊ฐ ์ตœ์ƒ์œ„ ์—…๋ฐ์ดํŠธ์— ์˜ํ•ด ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.
// setState, forceUpdate ๋“ฑ๊ณผ ๊ฐ™์€ ํ•จ์ˆ˜; ์ฐฝ์กฐ์™€
// ์ตœ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ํŒŒ๊ดด๋Š” ReactMount์—์„œ ๋ณดํ˜ธ๋ฉ๋‹ˆ๋‹ค.)

if (!batchingStrategy.isBatchingUpdates) {
batchingStrategy.batchedUpdates(enqueueUpdate, ๊ตฌ์„ฑ ์š”์†Œ);
๋ฐ˜ํ’ˆ;
}

dirtyComponents.push(๊ตฌ์„ฑ ์š”์†Œ);
if (component._updateBatchNumber == null) {
component._updateBatchNumber = updateBatchNumber + 1;
}
}

@mweststrate ๋‹จ 2์„ผํŠธ: ๋งค์šฐ ์œ ํšจํ•œ ์งˆ๋ฌธ์ž…๋‹ˆ๋‹ค.
setState๊ฐ€ ๋™๊ธฐ์‹์ด๋ผ๋ฉด ์ƒํƒœ์— ๋Œ€ํ•ด ์ถ”๋ก ํ•˜๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ์‰ฌ์šธ ๊ฒƒ์ด๋ผ๋Š” ๋ฐ ์šฐ๋ฆฌ ๋ชจ๋‘ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค.
setState๋ฅผ ๋น„๋™๊ธฐ์‹์œผ๋กœ ๋งŒ๋“œ๋Š” ์ด์œ ๊ฐ€ ๋ฌด์—‡์ด๋“  ๊ฐ„์—, ์˜ˆ๋ฅผ ๋“ค์–ด ํ˜„์žฌ ์ƒํƒœ์— ๋Œ€ํ•ด ์ถ”๋ก ํ•˜๊ธฐ ์–ด๋ ต๊ณ  ๊ฐœ๋ฐœ์ž์—๊ฒŒ ํ˜ผ๋ž€์„ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๋‹จ์ ์— ๋น„ํ•ด ๋ฐ˜์‘ ํŒ€์ด ์ž˜ ๋Œ€์‘ํ•  ์ˆ˜ ์žˆ์„์ง€ ํ™•์‹ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

@mweststrate ํฅ๋ฏธ๋กญ๊ฒŒ๋„ ์—ฌ๊ธฐ์— ๊ฐ™์€ ์งˆ๋ฌธ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค: https://discuss.reactjs.org/t/historic-reasons-behind-setstate-not-being-immediately-visible/8487

๋‚˜๋Š” ๊ฐœ์ธ์ ์œผ๋กœ ์ด ์ฃผ์ œ์— ๋Œ€ํ•ด ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ์„œ ํ˜ผ๋ž€์„ ๊ฒช์—ˆ๊ณ  ๋ชฉ๊ฒฉํ–ˆ์Šต๋‹ˆ๋‹ค. @gaearon ์‹œ๊ฐ„ ๋‚˜์‹ค ๋•Œ ์ด๊ฒƒ์— ๋Œ€ํ•œ ์„ค๋ช…์„

์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์˜ฌํ•ด๊ฐ€ ๋์ด ๋‚ฌ๊ณ  ์—ฐํœด ์ „์— ์ž‘์—…ํ•œ ๋ชจ๋“  ์ž‘์—…์„ ๋งˆ๋ฌด๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด GitHub ๋“ฑ์—์„œ ์กฐ๊ธˆ ๋Šฆ์–ด์กŒ์Šต๋‹ˆ๋‹ค.

์ด ์Šค๋ ˆ๋“œ๋กœ ๋Œ์•„์™€์„œ ๋…ผ์˜ํ•  ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์šฐ๋ฆฌ๋Š” ํ˜„์žฌ this.state ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ์‹œ๊ธฐ์— ์ง์ ‘ ๊ด€๋ จ๋œ ๋น„๋™๊ธฐ React ๊ธฐ๋Šฅ์„ ์ž‘์—…ํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์•ฝ๊ฐ„ ์›€์ง์ด๋Š” ๋ชฉํ‘œ์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๋ฌด์–ธ๊ฐ€๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐ ๋งŽ์€ ์‹œ๊ฐ„์„ ํ• ์• ํ•˜๊ณ  ๊ธฐ๋ณธ ๊ฐ€์ •์ด ๋ณ€๊ฒฝ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค์‹œ ์ž‘์„ฑํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์„ ์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด๊ฒƒ์„ ๊ณต๊ฐœํ•˜๊ณ  ์‹ถ์ง€๋งŒ ์–ธ์ œ ํ™•์‹คํ•œ ๋‹ต๋ณ€์„ ๋“œ๋ฆด ์ˆ˜ ์žˆ์„์ง€ ์•„์ง ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์— ๋ช‡ ๊ฐ€์ง€ ์ƒ๊ฐ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์–ด๋–ค ๋ฐฉ๋ฒ•์œผ๋กœ๋“  ์™„์ „ํ•œ ์‘๋‹ต์€ ์•„๋‹ˆ์ง€๋งŒ ์•„๋งˆ๋„ ์•„๋ฌด ๋ง๋„ ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ๋ณด๋‹ค ์—ฌ์ „ํžˆ ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ฒซ์งธ, ์ผ๊ด„ ์—…๋ฐ์ดํŠธ๋ฅผ ์œ„ํ•ด ์กฐ์ • ์„ ์ง€์—ฐํ•˜๋Š” ๊ฒƒ์ด ์œ ์ตํ•˜๋‹ค๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, setState() ๋™๊ธฐ์‹์œผ๋กœ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒƒ์€ ๋งŽ์€ ๊ฒฝ์šฐ์— ๋น„ํšจ์œจ์ ์ด๋ฉฐ ์—ฌ๋Ÿฌ ์—…๋ฐ์ดํŠธ๋ฅผ ์–ป์„ ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•ˆ๋‹ค๋ฉด ์ผ๊ด„ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜๋Š” ๊ฒƒ์ด ๋” ๋‚ซ๋‹ค๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๋ธŒ๋ผ์šฐ์ € click ํ•ธ๋“ค๋Ÿฌ ๋‚ด๋ถ€์— ์žˆ๊ณ  Child ๋ฐ Parent setState ํ˜ธ์ถœํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Child ๋‘ ๋ฒˆ, ๋Œ€์‹  ๋”ํ‹ฐ๋กœ ํ‘œ์‹œํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ € ์ด๋ฒคํŠธ๋ฅผ ์ข…๋ฃŒํ•˜๊ธฐ ์ „์— ํ•จ๊ป˜ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.

๋™์ผํ•œ ์ž‘์—…(์ผ๊ด„ ์ฒ˜๋ฆฌ)์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์—†์ง€๋งŒ ์กฐ์ •์ด ๋๋‚  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ณ  setState ์—…๋ฐ์ดํŠธ๋ฅผ this.state ์ฆ‰์‹œ ์ž‘์„ฑํ•  ์ˆ˜ ์—†๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋‚˜๋Š” ํ•˜๋‚˜์˜ ๋ถ„๋ช…ํ•œ ๋‹ต์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์ง€๋งŒ(๋‘ ์†”๋ฃจ์…˜ ๋ชจ๋‘ ์žฅ๋‹จ์ ์ด ์žˆ์Œ) ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ช‡ ๊ฐ€์ง€ ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด๋ถ€ ์ผ๊ด€์„ฑ ๋ณด์žฅ

ํ•ด๋„ state ๋™ ๊ธฐ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค props ์—†์Šต๋‹ˆ๋‹ค. (๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๊ธฐ ์ „์—๋Š” props ์•Œ ์ˆ˜ ์—†์œผ๋ฉฐ, ์ด๋ฅผ ๋™๊ธฐ์ ์œผ๋กœ ์ˆ˜ํ–‰ํ•˜๋ฉด ์ผ๊ด„ ์ฒ˜๋ฆฌ๊ฐ€ ์ฐฝ ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ‘๋‹ˆ๋‹ค.)

ํ˜„์žฌ React์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ฐ์ฒด( state , props , refs )๋Š” ๋‚ด๋ถ€์ ์œผ๋กœ ์„œ๋กœ

์ƒํƒœ๋งŒ ์‚ฌ์šฉํ•  ๋•Œ ๋™๊ธฐ์  ์œผ๋กœ

console.log(this.state.value) // 0
this.setState({ value: this.state.value + 1 });
console.log(this.state.value) // 1
this.setState({ value: this.state.value + 1 });
console.log(this.state.value) // 2

๊ทธ๋Ÿฌ๋‚˜ ๋ช‡ ๊ฐ€์ง€ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ๊ณต์œ ํ•˜๋ ค๋ฉด ์ด ์ƒํƒœ๋ฅผ ํ•ด์ œํ•ด์•ผ ์ƒ์œ„ ํ•ญ๋ชฉ์œผ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

-this.setState({ value: this.state.value + 1 });
+this.props.onIncrement(); // Does the same thing in a parent

setState() ์— ์˜์กดํ•˜๋Š” ์ผ๋ฐ˜์ ์ธ React ์•ฑ ์—์„œ ์ด๊ฒƒ์ด ์ผ์ƒ์ ์œผ๋กœ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ React ํŠน์ • ๋ฆฌํŒฉํ† ๋ง ์œ ํ˜• ์ด๋ผ๋Š” ์ ์„ ๊ฐ•์กฐํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์€ ์šฐ๋ฆฌ์˜ ์ฝ”๋“œ๋ฅผ ๊นจ๋œจ๋ฆฝ๋‹ˆ๋‹ค!

console.log(this.props.value) // 0
this.props.onIncrement();
console.log(this.props.value) // 0
this.props.onIncrement();
console.log(this.props.value) // 0

์ด๋Š” ์ œ์•ˆํ•œ ๋ชจ๋ธ์—์„œ this.state ๊ฐ€ ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ๋˜์ง€๋งŒ this.props ๋Š” ํ”Œ๋Ÿฌ์‹œ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ถ€๋ชจ๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜์ง€ ์•Š๊ณ ๋Š” this.props ๋ฅผ ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ฆ‰, ์ผ๊ด„ ์ฒ˜๋ฆฌ๋ฅผ ํฌ๊ธฐํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค(๊ฒฝ์šฐ์— ๋”ฐ๋ผ ์„ฑ๋Šฅ์ด ๋งค์šฐ ํฌ๊ฒŒ ์ €ํ•˜๋  ์ˆ˜ ์žˆ์Œ).

์˜ˆ๋ฅผ ๋“ค์–ด props (์•„์ง ํ”Œ๋Ÿฌ์‹œ๋˜์ง€ ์•Š์Œ) ๋ฐ state (์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ๋˜๋„๋ก ์ œ์•ˆ๋จ)์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ˜ผํ•ฉํ•˜์—ฌ ์ƒˆ ์ƒํƒœ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒฝ์šฐ์™€ ๊ฐ™์ด ์ด๊ฒƒ์ด ์–ด๋–ป๊ฒŒ ๊นจ์งˆ ์ˆ˜ ์žˆ๋Š”์ง€์— ๋Œ€ํ•œ ๋” ๋ฏธ๋ฌ˜ํ•œ ๊ฒฝ์šฐ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. : https://github.com/facebook/react/issues/122#issuecomment -81856416. ์ฐธ์กฐ๋Š” ๋™์ผํ•œ ๋ฌธ์ œ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค: https://github.com/facebook/react/issues/122#issuecomment -22659651.

์ด๋Ÿฌํ•œ ์˜ˆ๋Š” ์ „ํ˜€ ์ด๋ก ์ ์ธ ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ React Redux ๋ฐ”์ธ๋”ฉ์€ React props์™€ non-React ์ƒํƒœ๋ฅผ ํ˜ผํ•ฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ •ํ™•ํžˆ ์ด๋Ÿฐ ์ข…๋ฅ˜์˜ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. https://github.com/reactjs/react-redux/issues/86 , https://github.com/ reactjs/react-redux/pull/99 , https://github.com/reactjs/react-redux/issues/292 , https://github.com/reactjs/redux/issues/1415 , https://github. com/reactjs/react-redux/issues/525.com/reactjs/react-redux/issues/525.

MobX ์‚ฌ์šฉ์ž๊ฐ€ ์ด ๋ฌธ์ œ์— ๋ถ€๋”ชํžˆ์ง€ ์•Š์€ ์ด์œ ๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ๋‚ด ์ง๊ด€์€ ๊ทธ๋“ค์ด ๊ทธ๋Ÿฌํ•œ ์‹œ๋‚˜๋ฆฌ์˜ค์— ๋ถ€๋”ชํž ์ˆ˜ ์žˆ์ง€๋งŒ ์ž์‹ ์˜ ์ž˜๋ชป์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์•„๋‹ˆ๋ฉด props ์—์„œ ๋งŽ์ด ์ฝ์ง€ ์•Š๊ณ  ๋Œ€์‹  MobX ๊ฐ€๋ณ€ ๊ฐ์ฒด์—์„œ ์ง์ ‘ ์ฝ์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ์˜ค๋Š˜๋‚  React๋Š” ์ด๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ• ๊นŒ์š”? React์—์„œ this.state ๋ฐ this.props ๋ชจ๋‘ ์กฐ์ • ๋ฐ ํ”Œ๋Ÿฌ์‹œ ํ›„์—๋งŒ ์—…๋ฐ์ดํŠธ๋˜๋ฏ€๋กœ ๋ฆฌํŒฉํ† ๋ง ์ „ํ›„์— 0 ๊ฐ€ ์ธ์‡„๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋ฆฌํ”„ํŒ… ์ƒํƒœ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

์˜ˆ, ๊ฒฝ์šฐ์— ๋”ฐ๋ผ ๋ถˆํŽธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ ํ•œ ๊ณณ์—์„œ ์™„์ „ํ•œ ์ƒํƒœ ์—…๋ฐ์ดํŠธ ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ƒ๊ฐํ•˜๋Š” ๋Œ€์‹  ์ƒํƒœ๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ๋ณ€๊ฒฝํ•˜๋ ค๋Š” ๋” ๋งŽ์€ OO ๋ฐฐ๊ฒฝ์—์„œ ์˜ค๋Š” ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•ด. ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ ์ง‘์ค‘์ ์œผ๋กœ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ๋””๋ฒ„๊น… ๊ด€์ ์—์„œ ๋” ๋ช…ํ™•ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ https://github.com/facebook/react/issues/122#issuecomment -19888472์— ๊ณต๊ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์—ฌ์ „ํžˆ, ํŠนํžˆ ๋ Œ๋”๋ง์„ ์œ„ํ•œ ์ง„์‹ค ์†Œ์Šค๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ์ฝ๊ณ  ์‹ถ์€ ์ƒํƒœ๋ฅผ ์˜†์œผ๋กœ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ์ผ๋ถ€ ๊ฐ์ฒด๋กœ ์ฆ‰์‹œ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ MobX๊ฐ€ ๋‹น์‹ ์ด ํ•  ์ˆ˜ ์žˆ๋Š” ์ผ์ž…๋‹ˆ๋‹ค ๐Ÿ™‚.

๋˜ํ•œ ์ˆ˜ํ–‰ ์ค‘์ธ ์ž‘์—…์„ ์•Œ๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ ์ „์ฒด ํŠธ๋ฆฌ ๋ฅผ ReactDOM.flushSync(fn) ์ž…๋‹ˆ๋‹ค. ์•„์ง ๋ฌธ์„œํ™”ํ•˜์ง€ ์•Š์•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ 16.x ๋ฆด๋ฆฌ์Šค ์ฃผ๊ธฐ ์ค‘ ์–ธ์  ๊ฐ€๋Š” ๋ฌธ์„œํ™”ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ๋Š” ํ˜ธ์ถœ ๋‚ด๋ถ€์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์—…๋ฐ์ดํŠธ์— ๋Œ€ํ•ด ์™„์ „ํ•œ ์žฌ๋ Œ๋”๋ง์„ ๊ฐ•์ œ ์‹คํ–‰ํ•˜๋ฏ€๋กœ ๋งค์šฐ ๋“œ๋ฌผ๊ฒŒ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด props , state ๋ฐ refs ์‚ฌ์ด์˜ ๋‚ด๋ถ€ ์ผ๊ด€์„ฑ ๋ณด์žฅ์ด ๊นจ์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์š”์•ฝํ•˜์ž๋ฉด, React ๋ชจ๋ธ์€ ํ•ญ์ƒ ๊ฐ€์žฅ ๊ฐ„๊ฒฐํ•œ ์ฝ”๋“œ๋กœ ์ด์–ด์ง€์ง€๋Š” ์•Š์ง€๋งŒ ๋‚ด๋ถ€์ ์œผ๋กœ ์ผ๊ด€์„ฑ์ด ์žˆ๊ณ  ์ƒํƒœ๋ฅผ ์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์ด ์•ˆ์ „ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค .

๋™์‹œ ์—…๋ฐ์ดํŠธ ํ™œ์„ฑํ™”

๊ฐœ๋…์ ์œผ๋กœ React๋Š” ๊ตฌ์„ฑ ์š”์†Œ๋‹น ํ•˜๋‚˜์˜ ์—…๋ฐ์ดํŠธ ๋Œ€๊ธฐ์—ด์ด ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋…ผ์˜๊ฐ€ ์ „ํ˜€ ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ๊ฐ€ ์ •ํ™•ํ•œ ์ˆœ์„œ๋กœ ์ ์šฉ๋  ๊ฒƒ์ด๋ผ๋Š” ๋ฐ ์˜์‹ฌ์˜ ์—ฌ์ง€๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— this.state ์—…๋ฐ์ดํŠธ๋ฅผ ์ฆ‰์‹œ ์ ์šฉํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ๋…ผ์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๋Ÿด ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค( ํ•˜ํ•˜ ).

์ตœ๊ทผ์— ์šฐ๋ฆฌ๋Š” "๋น„๋™๊ธฐ ๋ Œ๋”๋ง"์— ๋Œ€ํ•ด ๋งŽ์ด ์ด์•ผ๊ธฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๊ทธ๊ฒƒ์ด ์˜๋ฏธํ•˜๋Š” ๋ฐ”๋ฅผ ์ž˜ ์ „๋‹ฌํ•˜์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ๊ฒƒ์„ ์ธ์ •ํ•˜์ง€๋งŒ ๊ทธ๊ฒƒ์ด R&D์˜ ํŠน์„ฑ์ž…๋‹ˆ๋‹ค. ๊ฐœ๋…์ ์œผ๋กœ ์œ ๋งํ•ด ๋ณด์ด๋Š” ์•„์ด๋””์–ด๋ฅผ ์ถ”๊ตฌํ•˜์ง€๋งŒ ์ถฉ๋ถ„ํ•œ ์‹œ๊ฐ„์„ ๋ณด๋‚ธ ํ›„์—์•ผ ๊ทธ ์˜๋ฏธ๋ฅผ ์ง„์ •์œผ๋กœ ์ดํ•ดํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

"๋น„๋™๊ธฐ ๋ Œ๋”๋ง"์„ ์„ค๋ช…ํ•˜๋Š” ํ•œ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์€ React๊ฐ€ setState() ํ˜ธ์ถœ์˜ ์ถœ์ฒ˜(์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ, ๋„คํŠธ์›Œํฌ ์‘๋‹ต, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋“ฑ)์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์šฐ์„  ์ˆœ์œ„๋ฅผ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค .

์˜ˆ๋ฅผ ๋“ค์–ด ๋ฉ”์‹œ์ง€๋ฅผ ์ž…๋ ฅํ•˜๋Š” ๊ฒฝ์šฐ TextBox ๊ตฌ์„ฑ ์š”์†Œ์˜ setState() ํ˜ธ์ถœ์€ ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ž…๋ ฅํ•˜๋Š” ๋™์•ˆ ์ƒˆ ๋ฉ”์‹œ์ง€๊ฐ€ ์ˆ˜์‹ ๋˜๋ฉด ์ƒˆ MessageBubble ๋ Œ๋”๋ง์„ ํŠน์ • ์ž„๊ณ„๊ฐ’(์˜ˆ: 1์ดˆ)๊นŒ์ง€ ์ง€์—ฐ์‹œํ‚ค๋Š” ๊ฒƒ์ด ์‹ค.

ํŠน์ • ์—…๋ฐ์ดํŠธ๊ฐ€ "๋‚ฎ์€ ์šฐ์„  ์ˆœ์œ„"๋ฅผ ๊ฐ–๋„๋ก ํ•˜๋ฉด ๋ Œ๋”๋ง์„ ๋ช‡ ๋ฐ€๋ฆฌ์ดˆ์˜ ์ž‘์€ ๋ฉ์–ด๋ฆฌ๋กœ ๋ถ„ํ• ํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ˆˆ์— ๋„์ง€ ์•Š๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์™€ ๊ฐ™์€ ์„ฑ๋Šฅ ์ตœ์ ํ™”๊ฐ€ ๊ทธ๋‹ค์ง€ ํฅ๋ฏธ๋กญ๊ฑฐ๋‚˜ ์„ค๋“๋ ฅ์ด ์—†์„ ์ˆ˜๋„ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. "MobX์—์„œ๋Š” ์ด๊ฒƒ์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ ์ถ”์ ์€ ์žฌ๋ Œ๋”๋ง์„ ํ”ผํ•˜๊ธฐ์— ์ถฉ๋ถ„ํžˆ ๋น ๋ฆ…๋‹ˆ๋‹ค."๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์ด ๋ชจ๋“  ๊ฒฝ์šฐ์— ์‚ฌ์‹ค์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค(์˜ˆ๋ฅผ ๋“ค์–ด, MobX๊ฐ€ ์•„๋ฌด๋ฆฌ ๋นจ๋ผ๋„ ์—ฌ์ „ํžˆ DOM ๋…ธ๋“œ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์ƒˆ๋กœ ๋งˆ์šดํŠธ๋œ ๋ทฐ์— ๋Œ€ํ•œ ๋ Œ๋”๋ง์„ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค). ๊ทธ๋ž˜๋„ ๊ทธ๊ฒƒ์ด ์‚ฌ์‹ค์ด๊ณ  ์ฝ๊ธฐ ๋ฐ ์“ฐ๊ธฐ๋ฅผ ์ถ”์ ํ•˜๋Š” ํŠน์ • JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๊ฐœ์ฒด๋ฅผ ํ•ญ์ƒ ๋ž˜ํ•‘ํ•ด๋„ ๊ดœ์ฐฎ๋‹ค๊ณ  ์˜์‹์ ์œผ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค๋ฉด ์ด๋Ÿฌํ•œ ์ตœ์ ํ™”์˜ ์ด์ ์„ ๋งŽ์ด ๋ˆ„๋ฆฌ์ง€ ๋ชปํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋น„๋™๊ธฐ ๋ Œ๋”๋ง์€ ์„ฑ๋Šฅ ์ตœ์ ํ™”์— ๊ด€ํ•œ ๊ฒƒ๋งŒ์ด ์•„๋‹™๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ํ•œ ํ™”๋ฉด์—์„œ ๋‹ค๋ฅธ ํ™”๋ฉด์œผ๋กœ ์ด๋™ํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ์ƒ๊ฐํ•ด ๋ณด์‹ญ์‹œ์˜ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ƒˆ ํ™”๋ฉด์ด ๋ Œ๋”๋ง๋˜๋Š” ๋™์•ˆ ์Šคํ”ผ๋„ˆ๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ํƒ์ƒ‰์ด ์ถฉ๋ถ„ํžˆ ๋น ๋ฅธ ๊ฒฝ์šฐ(์•ฝ 1์ดˆ ์ด๋‚ด) ์Šคํ”ผ๋„ˆ๋ฅผ ๊นœ๋ฐ•์ด๊ณ  ์ฆ‰์‹œ ์ˆจ๊ธฐ๋ฉด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ์ €ํ•˜๋ฉ๋‹ˆ๋‹ค. ์„ค์ƒ๊ฐ€์ƒ์œผ๋กœ ์„œ๋กœ ๋‹ค๋ฅธ ๋น„๋™๊ธฐ ์ข…์†์„ฑ(๋ฐ์ดํ„ฐ, ์ฝ”๋“œ, ์ด๋ฏธ์ง€)์„ ๊ฐ€์ง„ ์—ฌ๋Ÿฌ ์ˆ˜์ค€์˜ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ํ•˜๋‚˜์”ฉ ์งง๊ฒŒ ๊นœ๋ฐ•์ด๋Š” ์ผ๋ จ์˜ ์Šคํ”ผ๋„ˆ๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์‹œ๊ฐ์ ์œผ๋กœ ๋ถˆ์พŒํ•˜๊ณ  ๋ชจ๋“  DOM ๋ฆฌํ”Œ๋กœ์šฐ ๋•Œ๋ฌธ์— ์‹ค์ œ๋กœ ์•ฑ์„ ๋Š๋ฆฌ๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋งŽ์€ ์ƒ์šฉ๊ตฌ ์ฝ”๋“œ์˜ ์†Œ์Šค์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ๋ณด๊ธฐ๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๊ฐ„๋‹จํ•œ setState() ๋ฅผ ์ˆ˜ํ–‰ํ•  ๋•Œ ์—…๋ฐ์ดํŠธ๋œ ๋ณด๊ธฐ ๋ Œ๋”๋ง์„ "๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ" "์‹œ์ž‘"ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ข‹์ง€ ์•Š์„๊นŒ์š”? ์กฐ์ • ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ  ์—…๋ฐ์ดํŠธ๊ฐ€ ํŠน์ • ์ž„๊ณ„๊ฐ’(์˜ˆ: 1์ดˆ) ์ด์ƒ ์†Œ์š”๋˜๋ฉด ์Šคํ”ผ๋„ˆ๋ฅผ ํ‘œ์‹œํ•˜๋„๋ก ์„ ํƒํ•˜๊ณ  ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์ „์ฒด ์ƒˆ ํ•˜์œ„ ํŠธ๋ฆฌ์˜ ๋น„๋™๊ธฐ ์ข…์†์„ฑ์ด ๋‹ค์Œ๊ณผ ๊ฐ™์„ ๋•Œ React๊ฐ€ ์›ํ™œํ•œ ์ „ํ™˜์„ ์ˆ˜ํ–‰ํ•˜๋„๋ก ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ์ƒํ•ด ๋ณด์‹ญ์‹œ์˜ค.

ํ˜„์žฌ React ๋ชจ๋ธ๊ณผ ์ˆ˜๋ช… ์ฃผ๊ธฐ์— ๋Œ€ํ•œ ์•ฝ๊ฐ„์˜ ์กฐ์ •์œผ๋กœ ์šฐ๋ฆฌ๋Š” ์‹ค์ œ๋กœ ์ด๊ฒƒ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค! @acdlite ๋Š” ์ง€๋‚œ ๋ช‡ ์ฃผ ๋™์•ˆ ์ด ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด RFC ๋ฅผ ๊ฒŒ์‹œํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ this.state ๊ฐ€ ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ๋˜๋ฉด "์ด์ „ ๋ฒ„์ „"์ด ์—ฌ์ „ํžˆ ํ‘œ์‹œ๋˜๊ณ  ๋Œ€ํ™”ํ˜•์ธ ๋™์•ˆ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ๋ณด๊ธฐ์˜ "์ƒˆ ๋ฒ„์ „" ๋ Œ๋”๋ง์„ ์‹œ์ž‘ํ•  ๋ฐฉ๋ฒ•์ด ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค์˜ ๋…๋ฆฝ์ ์ธ ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋Š” ์ถฉ๋Œํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด ๋ชจ๋“  ๊ฒƒ์„ ๋ฐœํ‘œํ•˜๋Š” ๊ฒƒ๊ณผ ๊ด€๋ จํ•˜์—ฌ @acdlite ์˜ ์ฒœ๋‘ฅ์„ ํ›”์น˜๊ณ  ์‹ถ์ง€๋Š” ์•Š์ง€๋งŒ ์ด๊ฒƒ์ด ์ ์–ด๋„ ์กฐ๊ธˆ์€ ํฅ๋ฏธ๋กญ๊ฒŒ ๋“ค๋ฆฌ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์ด ์—ฌ์ „ํžˆ ๊ธฐํฌ์ฒ˜๋Ÿผ ๋“ค๋ฆด ์ˆ˜ ์žˆ๊ฑฐ๋‚˜ ์šฐ๋ฆฌ๊ฐ€ ๋ฌด์—‡์„ ํ•˜๊ณ  ์žˆ๋Š”์ง€ ์ •๋ง๋กœ ๋ชจ๋ฅด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋“ค๋ฆด ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์šฐ๋ฆฌ๊ฐ€ ์•ž์œผ๋กœ ๋ช‡ ๋‹ฌ ์•ˆ์— ๋‹น์‹ ์„ ์„ค๋“ํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‹น์‹ ์ด React ๋ชจ๋ธ์˜ ์œ ์—ฐ์„ฑ์— ๊ฐ์‚ฌํ•˜๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‚ด๊ฐ€ ์ดํ•ดํ•˜๋Š” ํ•œ, ์ ์–ด๋„ ๋ถ€๋ถ„์ ์œผ๋กœ๋Š” ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œ ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฌํ•œ ์œ ์—ฐ์„ฑ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

React ์•„ํ‚คํ…์ฒ˜ ์ด๋ฉด์˜ ๊ฒฐ์ •์— ๋Œ€ํ•œ ํ›Œ๋ฅญํ•˜๊ณ  ๊นŠ์ด ์žˆ๋Š” ์„ค๋ช…์ž…๋‹ˆ๋‹ค. ๊ฐ์‚ฌ ํ•ด์š”.

ํ‘œ์‹œ

๊ณ ๋งˆ์›Œ, ๋Œ„.

๋‚˜ โค๏ธ ์ด ๋ฌธ์ œ. ๋ฉ‹์ง„ ์งˆ๋ฌธ๊ณผ ๋ฉ‹์ง„ ๋‹ต๋ณ€. ํ•ญ์ƒ ์ด๊ฒƒ์ด ์ž˜๋ชป๋œ ๋””์ž์ธ ๊ฒฐ์ •์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์ด์ œ ๋‹ค์‹œ ์ƒ๊ฐํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ˜„

๊ณ ๋งˆ์›Œ, ๋Œ„.

๋‚˜๋Š” ๊ทธ๊ฒƒ์„ asyncAwesome setState :smile์ด๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค:

๋‚˜๋Š” ๋ชจ๋“  ๊ฒƒ์ด ๋จผ์ € ๋น„๋™๊ธฐ์‹์œผ๋กœ ๊ตฌํ˜„๋˜์–ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ์œผ๋ฉฐ, ๋™๊ธฐํ™” ์ž‘์—…์ด ํ•„์š”ํ•˜๋ฉด ๊ธ€์Ž„, ์™„๋ฃŒ ๋Œ€๊ธฐ๋กœ ๋น„๋™๊ธฐ์‹ ์ž‘์—…์„ ๋ž˜ํ•‘ํ•ฉ๋‹ˆ๋‹ค. ๋น„๋™๊ธฐ ์ฝ”๋“œ์—์„œ ๋™๊ธฐ ์ฝ”๋“œ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ์‰ฝ์Šต๋‹ˆ๋‹ค(ํ•„์š”ํ•œ ๊ฒƒ์€ ๋ž˜ํผ๋งŒ ์žˆ์Œ). ๋ฐ˜๋Œ€(์“ฐ๋ ˆ๋”ฉ์— ๋„๋‹ฌํ•˜์ง€ ์•Š๋Š” ํ•œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์™„์ „ํ•œ ์žฌ์ž‘์„ฑ์„ ํ•„์š”๋กœ ํ•จ)๋Š” ์ „ํ˜€ ๊ฐ€๋ณ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

@gaearon ์ž์„ธํ•œ ์„ค๋ช… ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๊ทธ๊ฒƒ์€ ์˜ค๋žซ๋™์•ˆ ์ €๋ฅผ ๊ดด๋กญํ˜”์Šต๋‹ˆ๋‹ค("์ข‹์€ ์ด์œ ๊ฐ€ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์•„๋ฌด๋„ ์–ด๋Š ๊ฒƒ์„ ๋งํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค"). ํ•˜์ง€๋งŒ ์ด์ œ๋Š” ์™„์ „ํžˆ ์ดํ•ด๊ฐ€ ๋˜์—ˆ๊ณ  ์ด๊ฒƒ์ด ์–ด๋–ป๊ฒŒ ์ •๋ง ์˜์‹์ ์ธ ๊ฒฐ์ •์ธ์ง€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. :). ๊ด‘๋ฒ”์œ„ํ•œ ๋‹ต๋ณ€์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

๋˜๋Š” ์†Œํ’ˆ์—์„œ ๋งŽ์ด ์ฝ์ง€ ์•Š๊ณ  ๋Œ€์‹  MobX ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ๊ฐœ์ฒด์—์„œ ์ง์ ‘ ์ฝ์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

MobX์—์„œ props๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ๊ตฌ์„ฑ ์š”์†Œ ๊ตฌ์„ฑ์œผ๋กœ๋งŒ ์‚ฌ์šฉ๋˜๋ฉฐ ๋„๋ฉ”์ธ ๋ฐ์ดํ„ฐ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ props์—์„œ ์บก์ฒ˜๋˜์ง€ ์•Š๊ณ  ๊ตฌ์„ฑ ์š”์†Œ ๊ฐ„์— ์ „๋‹ฌ๋˜๋Š” ๋„๋ฉ”์ธ ์—”ํ„ฐํ‹ฐ์—์„œ ์บก์ฒ˜๋ฉ๋‹ˆ๋‹ค.

๋‹ค์‹œ ํ•œ๋ฒˆ, ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

@gaearon ์ƒ์„ธํ•˜๊ณ  ์ข‹์€ ์„ค๋ช… ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
๋น„๋ก ๋‚ด๊ฐ€ ์ดํ•ดํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ ํ™•์‹คํ•˜๊ฒŒ ํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ์ด ์•„์ง ์—ฌ๊ธฐ์— ๋น ์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฒคํŠธ๊ฐ€ "Outside React"๋กœ ๋“ฑ๋ก๋˜๋ฉด ์˜ˆ๋ฅผ ๋“ค์–ด ref์—์„œ addEventListener ๋ฅผ ํ†ตํ•ด ์˜๋ฏธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์ผ๊ด„ ์ฒ˜๋ฆฌ๊ฐ€ ์ˆ˜ํ–‰๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ๊ณ ๋ คํ•˜์‹ญ์‹œ์˜ค.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    this.refBtn.addEventListener("click", this.onClick);
  }

  componentWillUnmount() {
    this.refBtn.removeEventListener("click", this.onClick);
  }

  onClick = () => {
    console.log("before setState", this.state.count);
    this.setState(state => ({ count: state.count + 1 }));
    console.log("after setState", this.state.count);
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}>React Event</button>
        <button ref={ref => (this.refBtn = ref)}>Direct DOM event</button>
      </div>
    );
  }
}

"React Event" ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์ฝ˜์†”์— ๋‹ค์Œ์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
"before setState" 0
"after setState" 0
๋‹ค๋ฅธ ๋ฒ„ํŠผ "Direct DOM ์ด๋ฒคํŠธ"๋ฅผ ํด๋ฆญํ•˜๋ฉด ์ฝ˜์†”์— ๋‹ค์Œ์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
"before setState" 0
"after setState" 1

์•ฝ๊ฐ„์˜ ์กฐ์‚ฌ์™€ ์†Œ์Šค ์ฝ”๋“œ ํƒ์ƒ‰ ํ›„์— ์™œ ์ด๋Ÿฐ ์ผ์ด ๋ฐœ์ƒํ•˜๋Š”์ง€ ์•Œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
๋ฐ˜์‘์€ ์ด๋ฒคํŠธ์˜ ํ๋ฆ„์„ ์™„์ „ํžˆ ์ œ์–ดํ•  ์ˆ˜ ์—†์œผ๋ฉฐ ๋‹ค์Œ ์ด๋ฒคํŠธ๊ฐ€ ์–ธ์ œ ์–ด๋–ป๊ฒŒ ๋ฐœ์ƒํ• ์ง€ ํ™•์‹ ํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ "ํŒจ๋‹‰ ๋ชจ๋“œ"๋กœ ์ƒํƒœ ๋ณ€๊ฒฝ์„ ์ฆ‰์‹œ ํŠธ๋ฆฌ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.

์ด์— ๋Œ€ํ•ด ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜์‹ญ๋‹ˆ๊นŒ? :์ƒ๊ฐ:

@sag1v ์•ฝ๊ฐ„ ๊ด€๋ จ์ด ์žˆ์ง€๋งŒ ์ƒˆ๋กœ์šด ์งˆ๋ฌธ์— ๋Œ€ํ•œ ์ƒˆ ๋ฌธ์ œ๋ฅผ ์—ฌ๋Š” ๊ฒƒ์ด ๋” ๋ช…ํ™•ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์„ค๋ช…์˜ ์–ด๋”˜๊ฐ€์— #11527์„ ์‚ฌ์šฉํ•˜์—ฌ ์—ฌ๊ธฐ์— ์—ฐ๊ฒฐํ•˜์‹ญ์‹œ์˜ค.

@sag1v @gaearon ์ด ์—ฌ๊ธฐ https://twitter.com/dan_abramov/status/949992957180104704 ์—์„œ ๋งค์šฐ ๊ฐ„๊ฒฐํ•œ ๋‹ต๋ณ€์„ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์— ๋Œ€ํ•œ ๊ทธ์˜ ๊ฒฌํ•ด๊ฐ€ ๋‚˜์—๊ฒŒ ๋” ๊ตฌ์ฒด์ ์œผ๋กœ ๋Œ€๋‹ตํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

@mweststrate ์ƒˆ ๋ฌธ์ œ๋ฅผ ์—ฌ๋Š” ๊ฒƒ์„ ์ƒ๊ฐํ–ˆ์ง€๋งŒ ์ด๊ฒƒ์ด " setState ๋น„๋™๊ธฐ์‹์ธ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?"๋ผ๋Š” ๊ท€ํ•˜์˜ ์งˆ๋ฌธ๊ณผ ์ง์ ‘์ ์ธ ๊ด€๋ จ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๊นจ๋‹ฌ์•˜์Šต๋‹ˆ๋‹ค.
์ด ํ† ๋ก ์€ setState "๋น„๋™๊ธฐ"๋กœ ๋งŒ๋“œ๋Š” ๊ฒฐ์ •์— ๊ด€ํ•œ ๊ฒƒ์ด๋ฏ€๋กœ "๋™๊ธฐํ™”"๋กœ ๋งŒ๋“œ๋Š” ์‹œ๊ธฐ์™€ ์ด์œ ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.
๋‚ด ๊ฒŒ์‹œ๋ฌผ์ด ์ด ๋ฌธ์ œ์™€ ๊ด€๋ จ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๋‹น์‹ ์—๊ฒŒ ํ™•์‹ ์‹œํ‚ค์ง€ ๋ชปํ•œ๋‹ค๋ฉด ๋‚˜๋Š” ์ƒˆ๋กœ์šด ๋ฌธ์ œ๋ฅผ ์—ฌ๋Š” ๊ฒƒ์„ ๊บผ๋ คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค :wink:

@Kaybarax ๊ท€ํ•˜์˜ ์งˆ๋ฌธ์ด "_๋™๊ธฐํ™”๋˜๋Š” ์ด์œ  _"๊ฐ€ ์•„๋‹ˆ๋ผ "_๋™๊ธฐํ™”๋˜๋Š” ์‹œ๊ธฐ_"์˜€๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
๋‚ด ๊ฒŒ์‹œ๋ฌผ์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด ์ด์œ ๋ฅผ ์•Œ ๊ฒƒ ๊ฐ™์ง€๋งŒ ํ™•์‹คํ•˜๊ณ  ๊ณต์‹ ๋‹ต๋ณ€์„ ์–ป๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค ํžˆํžˆ. :์›ƒ๋‹ค:

๋ฐ˜์‘์€ ์ด๋ฒคํŠธ์˜ ํ๋ฆ„์„ ์™„์ „ํžˆ ์ œ์–ดํ•  ์ˆ˜ ์—†์œผ๋ฉฐ ๋‹ค์Œ ์ด๋ฒคํŠธ๊ฐ€ ์–ธ์ œ ์–ด๋–ป๊ฒŒ ๋ฐœ์ƒํ• ์ง€ ํ™•์‹ ํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ "ํŒจ๋‹‰ ๋ชจ๋“œ"๋กœ ์ƒํƒœ ๋ณ€๊ฒฝ์„ ์ฆ‰์‹œ ํŠธ๋ฆฌ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.

์ผ์ข…์˜. ์ด๊ฒƒ์€ this.state ์—…๋ฐ์ดํŠธ์— ๋Œ€ํ•œ ์งˆ๋ฌธ๊ณผ ์ •ํ™•ํžˆ ๊ด€๋ จ์ด ์—†์ง€๋งŒ.

๋‹น์‹ ์ด ๋ฌป๋Š” ๊ฒƒ์€ ์–ด๋–ค ๊ฒฝ์šฐ์— React๊ฐ€ ์ผ๊ด„ ์ฒ˜๋ฆฌ๋ฅผ ํ™œ์„ฑํ™”ํ•˜๋Š”์ง€์ž…๋‹ˆ๋‹ค. React๋Š” ํ˜„์žฌ React๊ฐ€ ๊ด€๋ฆฌํ•˜๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๋‚ด์—์„œ ์—…๋ฐ์ดํŠธ๋ฅผ ์ผ๊ด„ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. React๋Š” ์ตœ์ƒ์œ„ ํ˜ธ์ถœ ์Šคํƒ ํ”„๋ ˆ์ž„์— "์•‰์•„" ์žˆ๊ณ  ๋ชจ๋“  React ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ์–ธ์ œ ์‹คํ–‰๋˜์—ˆ๋Š”์ง€ ์•Œ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ ์‹œ์ ์—์„œ ์—…๋ฐ์ดํŠธ๋ฅผ ํ”Œ๋Ÿฌ์‹œํ•ฉ๋‹ˆ๋‹ค.

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

React์˜ ํ–ฅํ›„ ๋ฒ„์ „์—์„œ๋Š” ์ด ๋™์ž‘์ด ๋ณ€๊ฒฝ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ณ„ํš์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฅผ ๋‚ฎ์€ ์šฐ์„  ์ˆœ์œ„๋กœ ์ฒ˜๋ฆฌํ•˜์—ฌ ํ†ตํ•ฉ ๋ฐ ์ผ๊ด„ ์ฒ˜๋ฆฌ(์˜ˆ: 1์ดˆ ์ด๋‚ด์—)ํ•˜๊ณ  ์ฆ‰์‹œ ํ”Œ๋Ÿฌ์‹œํ•˜๋„๋ก ์„ ํƒํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ https://github.com/facebook/react/issues/11171#issuecomment -357945371์—์„œ ์ฝ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์—„์ฒญ๋‚œ!

๊ทธ ์งˆ๋ฌธ๊ณผ ๋Œ€๋‹ต์€ ๋” ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์–ด๋”˜๊ฐ€์— ๋ฌธ์„œํ™”๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋ฅผ ๊นจ์šฐ์ณ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋งŽ์ด ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌ ํ•ด์š”

์Šค๋ ˆ๋“œ์— ๋‚ด ๊ด€์ ์„ ์ถ”๊ฐ€ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ช‡ ๋‹ฌ ๋™์•ˆ MobX ๊ธฐ๋ฐ˜ ์•ฑ์—์„œ ์ž‘์—…ํ•˜๊ณ  ๋ช‡ ๋…„ ๋™์•ˆ ClojureScript๋ฅผ ํƒ์ƒ‰ํ•˜๊ณ  ๋‚˜๋งŒ์˜ React ๋Œ€์•ˆ(Respo๋ผ๊ณ  ํ•จ)์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” ๋งค์šฐ ์งง์€ ์‹œ๊ฐ„์ด์ง€๋งŒ ์ดˆ๊ธฐ์— Redux๋ฅผ ์‹œ๋„ํ–ˆ๊ณ  ReasonML์— ๋ฒ ํŒ…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

React์™€ FP(Functional Programming)๋ฅผ ๊ฒฐํ•ฉํ•˜๋Š” ํ•ต์‹ฌ ์•„์ด๋””์–ด๋Š” FP์˜ ๋ฒ•๋ฅ ์„ ์ค€์ˆ˜ํ•˜๋Š” ๋ชจ๋“  ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ทฐ๋กœ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ ์กฐ๊ฐ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ˆœ์ˆ˜ ํ•จ์ˆ˜๋งŒ ์‚ฌ์šฉํ•˜๋ฉด ๋ถ€์ž‘์šฉ์ด ์—†์Šต๋‹ˆ๋‹ค.

React๋Š” ์ˆœ์ˆ˜ ํ•จ์ˆ˜ํ˜•์ด ์•„๋‹™๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ ๋‚ด๋ถ€์˜ ๋กœ์ปฌ ์ƒํƒœ๋ฅผ ์ˆ˜์šฉํ•จ์œผ๋กœ์จ React๋Š” DOM ๋ฐ ๊ธฐํƒ€ ๋ธŒ๋ผ์šฐ์ € API(MobX์—๋„ ์นœ์ˆ™ํ•จ)์™€ ๊ด€๋ จ๋œ ๋‹ค์–‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋Šฅ๋ ฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ๊ทธ๋กœ ์ธํ•ด React๋Š” ์ˆœ์ˆ˜ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‚˜๋Š” ClojureScript์—์„œ ์‹œ๋„ํ–ˆ๋Š”๋ฐ React๊ฐ€ ์ˆœ์ˆ˜ํ•˜๋‹ค๋ฉด ๋ถ€์ž‘์šฉ์ด ์žˆ๋Š” ๊ธฐ์กด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๊ธฐ๊ฐ€ ์ •๋ง ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์— ์žฌ์•™์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ Respo(๋‚ด ์ž์‹ ์˜ ์†”๋ฃจ์…˜)์—๋Š” ์ถฉ๋Œํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋Š” ๋‘ ๊ฐ€์ง€ ๋ชฉํ‘œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. 1) view = f(store) ์ด๋ฏ€๋กœ ๋กœ์ปฌ ์ƒํƒœ๊ฐ€ ์˜ˆ์ƒ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. 2) ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ „์—ญ ๊ฐ์†๊ธฐ์—์„œ ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ UI ์ƒํƒœ๋ฅผ ํ”„๋กœ๊ทธ๋ž˜๋ฐํ•˜๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ฒฐ๊ตญ paths ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ „์—ญ ์ €์žฅ์†Œ์—์„œ ๊ตฌ์„ฑ ์š”์†Œ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ๊ตฌ๋ฌธ ์„คํƒ•์ด ํ•„์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•„๋ƒˆ๊ณ , ํ•œํŽธ Clojure ๋งคํฌ๋กœ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์„ฑ ์š”์†Œ ๋‚ด๋ถ€์— ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๋‚ด๊ฐ€ ๋ฐฐ์šด ๊ฒƒ์€ ๋กœ์ปฌ ์ƒํƒœ๋Š” ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜ ๊ธฐ๋Šฅ์ด๋ฉฐ, ๊ทธ ์•„๋ž˜์—๋Š” ์—”์ง„์ด ๊นŠ์€ ์ˆ˜์ค€์—์„œ ์ตœ์ ํ™”๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ธ€๋กœ๋ฒŒ ์ƒํƒœ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ MobX ์‚ฌ๋žŒ๋“ค์€ OOP๋ฅผ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜์„ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๊นŒ, ์•„๋‹ˆ๋ฉด ์—”์ง„์„ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๊นŒ?

๊ทธ๊ฑด ๊ทธ๋ ‡๊ณ  ๋‚˜๋Š” ๋‹น์‹ ์ด ๊ทธ๊ฒƒ์„ ๋†“์นœ ๊ฒฝ์šฐ๋ฅผ ๋Œ€๋น„ํ•˜์—ฌ React์˜ ๋ฏธ๋ž˜์™€ ๋น„๋™๊ธฐ ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ–ˆ์Šต๋‹ˆ๋‹ค.
https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

๋Œ„, ๋‹น์‹ ์€ ๋‚ด ์šฐ์ƒ์ž…๋‹ˆ๋‹ค ..... ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰