๊ฝค ์ค๋ซ๋์ ๋๋ setState
๊ฐ ๋น๋๊ธฐ์์ธ ์ด์ ๋ฅผ ์ดํดํ๋ ค๊ณ ๋
ธ๋ ฅํ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ณผ๊ฑฐ์ ๋ํ ๋ต์ ์ฐพ์ง ๋ชปํด ์ญ์ฌ์ ์ด์ ๋ผ ์ง๊ธ์ ๋ฐ๊พธ๊ธฐ ์ด๋ ต๋ค๋ ๊ฒฐ๋ก ์ ๋ด๋ ธ์ต๋๋ค. ๊ทธ๋ฐ๋ฐ @gaearon ๋์ด ๋ถ๋ช
ํ ์ด์ ๊ฐ ์๋ค๊ณ
์ฌํํผ ์ ๊ฐ ์์ฃผ ๋ฃ๋ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค๋ง, ๋์ํ๊ธฐ๊ฐ ๋๋ฌด ์ฝ๊ธฐ ๋๋ฌธ์ ๋ชจ๋ ๊ฒ์ด ๋ ์๋ ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
๋ง์ ์ฌ๋๋ค์ด ์ฒ์์๋ ๋ ๋๋ง ํจ์จ์ฑ ๋๋ฌธ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ด๊ฒ์ด ์ด ๋์์ ์ด์ ๋ผ๊ณ ์๊ฐํ์ง ์์ต๋๋ค. ์๋ํ๋ฉด ๋น๋๊ธฐ ๋ ๋๋ง๊ณผ ํจ๊ป setState ๋๊ธฐํ๋ฅผ ์ ์งํ๋ ๊ฒ์ด ๋์๊ฒ๋ ์ฌ์ํ๊ฒ ๋ค๋ฆฌ๊ธฐ ๋๋ฌธ์ ๋๋ค.
Component.prototype.setState = (nextState) => {
this.state = nextState
if (!this.renderScheduled)
setImmediate(this.forceUpdate)
}
์ค์ ๋ก ์๋ฅผ ๋ค์ด mobx-react
๋ ๊ด์ฐฐ ๊ฐ๋ฅ ํญ๋ชฉ์ ๋ํ ๋๊ธฐ ํ ๋น์ ํ์ฉํ๊ณ ์ฌ์ ํ ๋ ๋๋ง์ ๋น๋๊ธฐ ํน์ฑ์ ์กด์คํฉ๋๋ค.
๋ด๊ฐ ๊ฐ๋ ๋ฃ๋ ๋ ๋ค๋ฅธ ์ฃผ์ฅ์ _์์ฒญ๋_ ์ํ๊ฐ ์๋๋ผ _๋ ๋๋ง๋_ ์ํ์ ๋ํด ์ถ๋ก ํ๊ธฐ๋ฅผ ์ํ๋ค๋ ๊ฒ์ ๋๋ค. ๊ทธ๋ฌ๋ ์ด ์์น๋ ํฐ ์ฅ์ ์ด ์๋์ง ํ์ ํ ์ ์์ต๋๋ค. ๊ฐ๋ ์ ์ผ๋ก ๊ทธ๊ฒ์ ๋์๊ฒ ์ด์ํ๊ฒ ๋๊ปด์ง๋ค. ๋ ๋๋ง์ ๋ถ์์ฉ์ด๊ณ ์ํ๋ ์ฌ์ค์ ๊ดํ ๊ฒ์ ๋๋ค. ํ์ฌ ์ ๋ 32์ด์ด๊ณ , ์์ ํ๋ ๊ตฌ์ฑ ์์๊ฐ ์ฌํด ๋ค์ ๋ ๋๋งํ ์ ์๋์ง ์ฌ๋ถ์ ๊ด๊ณ์์ด ๋ด๋ ์๋ 33์ด์ด ๋ฉ๋๋ค. :)
(์๋ง ์ข์ง ์์) ํํ์ ์ ๊ทธ๋ฆฌ๋ ค๋ฉด: ์๊ฐ ์์ฑ ๋จ์ด ๋ฌธ์์ ๋ง์ง๋ง ๋ฒ์ ์ ์ธ์ํ ๋๊น์ง _์ฝ์ ์ ์๋ค๋ฉด ๊ทธ๊ฒ์ ๊ฝค ์ด์ํ ๊ฒ์ ๋๋ค. ์๋ฅผ ๋ค์ด ๊ฒ์ ์์ง์ด ๊ฒ์์ ์ด๋ค ์ํ๊ฐ ์ ํํ ๋ ๋๋ง๋์๊ณ ์ด๋ค ํ๋ ์์ด ์ญ์ ๋์๋์ง์ ๋ํ ํผ๋๋ฐฑ์ ์ ๊ณตํ์ง ์๋๋ค๊ณ ์๊ฐํฉ๋๋ค.
ํฅ๋ฏธ๋ก์ด ๊ด์ฐฐ: 2๋
๋์ mobx-react
์๋ฌด๋ ๋์๊ฒ ๋ค์๊ณผ ๊ฐ์ ์ง๋ฌธ์ ํ์ง ์์์ต๋๋ค. ๊ด์ฐฐ ๊ฐ๋ฅ ํญ๋ชฉ์ด ๋ ๋๋ง๋์๋์ง ์ด๋ป๊ฒ ์ ์ ์์ต๋๊น? ์ด ์ง๋ฌธ์ ๊ทธ๋ค์ง ์์ฃผ ๊ด๋ จ์ด ์๋ ๊ฒ ๊ฐ์ต๋๋ค.
์ด๋ค ๋ฐ์ดํฐ๊ฐ ๋ ๋๋ง๋์๋์ง ์๋ ๊ฒ์ด ๊ด๋ จ์ด ์๋ ๋ช ๊ฐ์ง ์ฌ๋ก๋ฅผ ์ ํ์ต๋๋ค. ๋ด๊ฐ ๊ธฐ์ตํ๋ ๊ฒฝ์ฐ๋ ๋ ์ด์์ ๋ชฉ์ ์ผ๋ก ์ผ๋ถ ๋ฐ์ดํฐ์ ํฝ์
์น์๋ฅผ ์์์ผ ํ๋ ๊ฒฝ์ฐ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๊ทธ๊ฒ์ didComponentUpdate
๋ฅผ ์ฌ์ฉํ์ฌ ์ฐ์ํ๊ฒ ํด๊ฒฐ๋์์ผ๋ฉฐ ์ค์ ๋ก setState
๊ฐ ๋น๋๊ธฐํ๋๋ ๋ฐ์๋ ์์กดํ์ง ์์์ต๋๋ค. ์ด๋ฌํ ๊ฒฝ์ฐ๋ ๋งค์ฐ ๋๋ฌผ๊ธฐ ๋๋ฌธ์ ์ฃผ๋ก ์ฃผ๋ณ์ API๋ฅผ ์ค๊ณํ๋ ๊ฒ์ด ๊ฑฐ์ ์ ๋นํ๋์ง ์์ต๋๋ค. ์ด๋ป๊ฒ๋ ํ ์ ์๋ค๋ฉด ๊ทธ๊ฒ์ผ๋ก ์ถฉ๋ถํ๋ค๊ณ ์๊ฐํด
๋๋ React ํ์ด setState
์ ๋น๋๊ธฐ ํน์ฑ์ด ์์ฃผ ๋์
ํ๋ ํผ๋์ ์๊ณ ์๋ค๋ ๋ฐ ์์ฌ์ ์ฌ์ง๊ฐ ์์ต๋๋ค. ๋ฐ๋ผ์ ํ์ฌ ์๋ฏธ ์ฒด๊ณ์ ๋ ๋ค๋ฅธ ์์ฃผ ์ข์ ์ด์ ๊ฐ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ ๋ง ํด์ฃผ์ธ์ :)
๋ชจ๋ ๊ธฐ๋ค ๋ฆฝ๋๋ค @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
๋, ๋น์ ์ ๋ด ์ฐ์์ ๋๋ค ..... ๊ฐ์ฌํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ฌ๊ธฐ์ ๋ช ๊ฐ์ง ์๊ฐ์ด ์์ต๋๋ค. ์ด๊ฒ์ ์ด๋ค ๋ฐฉ๋ฒ์ผ๋ก๋ ์์ ํ ์๋ต์ ์๋์ง๋ง ์๋ง๋ ์๋ฌด ๋ง๋ ํ์ง ์๋ ๊ฒ๋ณด๋ค ์ฌ์ ํ ๋์์ด ๋ ๊ฒ์ ๋๋ค.
์ฒซ์งธ, ์ผ๊ด ์ ๋ฐ์ดํธ๋ฅผ ์ํด ์กฐ์ ์ ์ง์ฐํ๋ ๊ฒ์ด ์ ์ตํ๋ค๋ ๋ฐ ๋์ํฉ๋๋ค. ์ฆ,
setState()
๋๊ธฐ์์ผ๋ก ๋ค์ ๋ ๋๋งํ๋ ๊ฒ์ ๋ง์ ๊ฒฝ์ฐ์ ๋นํจ์จ์ ์ด๋ฉฐ ์ฌ๋ฌ ์ ๋ฐ์ดํธ๋ฅผ ์ป์ ๊ฐ๋ฅ์ฑ์ด ์๋ค๋ ๊ฒ์ ์๋ค๋ฉด ์ผ๊ด ์ ๋ฐ์ดํธ๋ฅผ ํ๋ ๊ฒ์ด ๋ ๋ซ๋ค๋ ๋ฐ ๋์ํฉ๋๋ค.์๋ฅผ ๋ค์ด, ๋ธ๋ผ์ฐ์
click
ํธ๋ค๋ฌ ๋ด๋ถ์ ์๊ณChild
๋ฐParent
setState
ํธ์ถํ๋ ๊ฒฝ์ฐ ๋ค์ ๋ ๋๋งํ๊ณ ์ถ์ง ์์ต๋๋ค.Child
๋ ๋ฒ, ๋์ ๋ํฐ๋ก ํ์ํ๊ณ ๋ธ๋ผ์ฐ์ ์ด๋ฒคํธ๋ฅผ ์ข ๋ฃํ๊ธฐ ์ ์ ํจ๊ป ๋ค์ ๋ ๋๋งํ๋ ๊ฒ์ ์ ํธํฉ๋๋ค.๋์ผํ ์์ (์ผ๊ด ์ฒ๋ฆฌ)์ ์ํํ ์ ์์ง๋ง ์กฐ์ ์ด ๋๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ
setState
์ ๋ฐ์ดํธ๋ฅผthis.state
์ฆ์ ์์ฑํ ์ ์๋ ์ด์ ๋ ๋ฌด์์ ๋๊น? ๋๋ ํ๋์ ๋ถ๋ช ํ ๋ต์ด ์๋ค๊ณ ์๊ฐํ์ง ์์ง๋ง(๋ ์๋ฃจ์ ๋ชจ๋ ์ฅ๋จ์ ์ด ์์) ์๊ฐํ ์ ์๋ ๋ช ๊ฐ์ง ์ด์ ๊ฐ ์์ต๋๋ค.๋ด๋ถ ์ผ๊ด์ฑ ๋ณด์ฅ
ํด๋
state
๋ ๊ธฐ์ ์ผ๋ก ์ ๋ฐ์ดํธ๋ฉ๋๋คprops
์์ต๋๋ค. (๋ถ๋ชจ ์ปดํฌ๋ํธ๋ฅผ ๋ค์ ๋ ๋๋งํ๊ธฐ ์ ์๋props
์ ์ ์์ผ๋ฉฐ, ์ด๋ฅผ ๋๊ธฐ์ ์ผ๋ก ์ํํ๋ฉด ์ผ๊ด ์ฒ๋ฆฌ๊ฐ ์ฐฝ ๋ฐ์ผ๋ก ๋๊ฐ๋๋ค.)ํ์ฌ React์์ ์ ๊ณตํ๋ ๊ฐ์ฒด(
state
,props
,refs
)๋ ๋ด๋ถ์ ์ผ๋ก ์๋ก์ํ๋ง ์ฌ์ฉํ ๋ ๋๊ธฐ์ ์ผ๋ก
๊ทธ๋ฌ๋ ๋ช ๊ฐ์ง ๊ตฌ์ฑ ์์์์ ๊ณต์ ํ๋ ค๋ฉด ์ด ์ํ๋ฅผ ํด์ ํด์ผ ์์ ํญ๋ชฉ์ผ๋ก ์ด๋ํ ์ ์์ต๋๋ค.
setState()
์ ์์กดํ๋ ์ผ๋ฐ์ ์ธ React ์ฑ ์์ ์ด๊ฒ์ด ์ผ์์ ์ผ๋ก ์ํํ๋ ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ React ํน์ ๋ฆฌํฉํ ๋ง ์ ํ ์ด๋ผ๋ ์ ์ ๊ฐ์กฐํ๊ณ ์ถ์ต๋๋ค.๊ทธ๋ฌ๋ ์ด๊ฒ์ ์ฐ๋ฆฌ์ ์ฝ๋๋ฅผ ๊นจ๋จ๋ฆฝ๋๋ค!
์ด๋ ์ ์ํ ๋ชจ๋ธ์์
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 ๋ชจ๋ธ์ ์ ์ฐ์ฑ์ ๊ฐ์ฌํ๊ฒ ๋ ๊ฒ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ด๊ฐ ์ดํดํ๋ ํ, ์ ์ด๋ ๋ถ๋ถ์ ์ผ๋ก๋ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ์ฆ์ ํ๋ฌ์ ํ์ง ์๊ธฐ ๋๋ฌธ์ ์ด๋ฌํ ์ ์ฐ์ฑ์ด ๊ฐ๋ฅํฉ๋๋ค.