We want to hear from you!Take our 2021 Community Survey!
Support Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ Help Provide Humanitarian Aid to Ukraine.

React.Component

์ด ๋ฌธ์„œ์—์„œ๋Š” React ์ปดํฌ๋„ŒํŠธ class๋ฅผ ๋‹ค๋ฃจ๋Š” API๋“ค์„ ์ž์„ธํžˆ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฌธ์„œ๋Š” ์ปดํฌ๋„ŒํŠธ์™€ props, state์™€ ์ƒ๋ช…์ฃผ๊ธฐ ๋“ฑ๊ณผ ๊ฐ™์€ ๊ธฐ์ดˆ์ ์ธ React์˜ ๊ฐœ๋…๋“ค์— ์ต์ˆ™ํ•˜๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋ฉด, ๋จผ์ € ์ฝ์œผ์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๊ฐœ์š”

React๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ class ๋˜๋Š” ํ•จ์ˆ˜๋กœ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. class๋กœ ์ •์˜๋œ ์ปดํฌ๋„ŒํŠธ๋Š” ์•„๋ž˜์— ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๊ณ  ์žˆ๋“ฏ ๋ณด๋‹ค ๋งŽ์€ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. React ์ปดํฌ๋„ŒํŠธ class๋ฅผ ์ •์˜ํ•˜๋ ค๋ฉด React.Component๋ฅผ ์ƒ์†๋ฐ›์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

render()๋Š” React.Component์˜ ํ•˜์œ„ class์—์„œ ๋ฐ˜๋“œ์‹œ ์ •์˜ํ•ด์•ผ ํ•˜๋Š” ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค. ๊ทธ ์™ธ์— ์ด ๋ฌธ์„œ์—์„œ ์„ค๋ช…ํ•˜๋Š” ๋ฉ”์„œ๋“œ๋“ค์€ ์„ ํƒ ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”. React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ์—๋Š” ์ƒ์†๋ณด๋‹ค ํ•ฉ์„ฑ์„ ์ฃผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์˜

React๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋ฐ˜๋“œ์‹œ ES6 class ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ ๋Œ€์‹  create-react-class ๋ชจ๋“ˆ ๋˜๋Š” ์ด์™€ ์œ ์‚ฌํ•œ ๋ณ„๋„์˜ ์ถ”์ƒํ™”๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค. ์ž์„ธํ•œ ์ •๋ณด๋Š” ES6 ์—†์ด ์‚ฌ์šฉํ•˜๋Š” React ๋ฌธ์„œ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ์ƒ๋ช…์ฃผ๊ธฐ

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

๋งˆ์šดํŠธ

์•„๋ž˜ ๋ฉ”์„œ๋“œ๋“ค์€ ์ปดํฌ๋„ŒํŠธ์˜ ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋˜์–ด DOM ์ƒ์— ์‚ฝ์ž…๋  ๋•Œ์— ์ˆœ์„œ๋Œ€๋กœ ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.

์ฃผ์˜

์•„๋ž˜ ๋ฉ”์„œ๋“œ๋Š” ๊ธฐ์กด์— ์‚ฌ์šฉ๋˜์—ˆ์ง€๋งŒ ์ด์ œ๋Š” ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

์—…๋ฐ์ดํŠธ

props ๋˜๋Š” state๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ๊ฐฑ์‹ ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ ๋ฉ”์„œ๋“œ๋“ค์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ค์‹œ ๋ Œ๋”๋ง๋  ๋•Œ ์ˆœ์„œ๋Œ€๋กœ ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.

์ฃผ์˜

์•„๋ž˜ ๋ฉ”์„œ๋“œ๋Š” ๊ธฐ์กด์— ์‚ฌ์šฉ๋˜์—ˆ์ง€๋งŒ ์ด์ œ๋Š” ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

๋งˆ์šดํŠธ ํ•ด์ œ

์•„๋ž˜ ๋ฉ”์„œ๋“œ๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ DOM ์ƒ์—์„œ ์ œ๊ฑฐ๋  ๋•Œ์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.

์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ

์•„๋ž˜ ๋ฉ”์„œ๋“œ๋“ค์€ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๊ฑฐ๋‚˜, ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๊ฑฐ๋‚˜, ๋˜๋Š” ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒ์„ฑ์ž ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ณผ์ •์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.

๊ธฐํƒ€ API

์ด ์™ธ์—๋„ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ช‡๋ช‡ API๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

class ํ”„๋กœํผํ‹ฐ

์ธ์Šคํ„ด์Šค ํ”„๋กœํผํ‹ฐ


์ฐธ๊ณ ์„œ

์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ

์ด ์„น์…˜์—์„œ ๋‹ค๋ฃจ๋Š” ๋ฉ”์„œ๋“œ๋“ค์„ ์‚ฌ์šฉํ•˜๋ฉด React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ์— ๋งˆ์ฃผ์น˜๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ƒ๋ช…์ฃผ๊ธฐ ๋„ํ‘œ๋ฅผ ์‹œ๊ฐ ์ž๋ฃŒ๋กœ ํ™œ์šฉํ•˜๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค.

render()

render()

render() ๋ฉ”์„œ๋“œ๋Š” ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ˜๋“œ์‹œ ๊ตฌํ˜„๋ผ์•ผํ•˜๋Š” ์œ ์ผํ•œ ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.

์ด ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋˜๋ฉด this.props์™€ this.state์˜ ๊ฐ’์„ ํ™œ์šฉํ•˜์—ฌ ์•„๋ž˜์˜ ๊ฒƒ ์ค‘ ํ•˜๋‚˜๋ฅผ ๋ฐ˜ํ™˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • React ์—˜๋ฆฌ๋จผํŠธ. ๋ณดํ†ต JSX๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, <div />์™€ <MyComponent />๋Š” React๊ฐ€ DOM ๋…ธ๋“œ ๋˜๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ •์˜ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๋„๋ก ์ง€์‹œํ•˜๋Š” React ์—˜๋ฆฌ๋จผํŠธ์ž…๋‹ˆ๋‹ค.
  • ๋ฐฐ์—ด๊ณผ Fragment. render()๋ฅผ ํ†ตํ•˜์—ฌ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ž์„ธํ•œ ์ •๋ณด๋Š” Fragments ๋ฌธ์„œ๋ฅผ ํ†ตํ•˜์—ฌ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • Portal. ๋ณ„๋„์˜ DOM ํ•˜์œ„ ํŠธ๋ฆฌ์— ์ž์‹ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. ์ž์„ธํ•œ ์ •๋ณด๋Š” Portals์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ฌธ์ž์—ด๊ณผ ์ˆซ์ž. ์ด ๊ฐ’๋“ค์€ DOM ์ƒ์— ํ…์ŠคํŠธ ๋…ธ๋“œ๋กœ์„œ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค.
  • Boolean ๋˜๋Š” null. ์•„๋ฌด๊ฒƒ๋„ ๋ Œ๋”๋งํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. (๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ return test && <Child /> ํŒจํ„ด์„ ์ง€์›ํ•˜๋Š” ๋ฐ์— ์‚ฌ์šฉ๋˜๋ฉฐ, ์—ฌ๊ธฐ์„œ test๋Š” boolean ๊ฐ’์ž…๋‹ˆ๋‹ค.)

render() ํ•จ์ˆ˜๋Š” ์ˆœ์ˆ˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ์ปดํฌ๋„ŒํŠธ์˜ state๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ , ํ˜ธ์ถœ๋  ๋•Œ๋งˆ๋‹ค ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•ด์•ผ ํ•˜๋ฉฐ, ๋ธŒ๋ผ์šฐ์ €์™€ ์ง์ ‘์ ์œผ๋กœ ์ƒํ˜ธ์ž‘์šฉ์„ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

์ฃผ์˜

shouldComponentUpdate()๊ฐ€ false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉด render()๋Š” ํ˜ธ์ถœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


constructor()

constructor(props)

๋ฉ”์„œ๋“œ๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜๊ฑฐ๋‚˜ state๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ์ž‘์—…์ด ์—†๋‹ค๋ฉด, ํ•ด๋‹น React ์ปดํฌ๋„ŒํŠธ์—๋Š” ์ƒ์„ฑ์ž๋ฅผ ๊ตฌํ˜„ํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค.

React ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ์„ฑ์ž๋Š” ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋˜๊ธฐ ์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. React.Component๋ฅผ ์ƒ์†ํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ์„ฑ์ž๋ฅผ ๊ตฌํ˜„ํ•  ๋•Œ์—๋Š” ๋‹ค๋ฅธ ๊ตฌ๋ฌธ์— ์•ž์„œ super(props)๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด this.props๊ฐ€ ์ƒ์„ฑ์ž ๋‚ด์—์„œ ์ •์˜๋˜์ง€ ์•Š์•„ ๋ฒ„๊ทธ๋กœ ์ด์–ด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React์—์„œ ์ƒ์„ฑ์ž๋Š” ๋ณดํ†ต ์•„๋ž˜์˜ ๋‘ ๊ฐ€์ง€ ๋ชฉ์ ์„ ์œ„ํ•˜์—ฌ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

constructor() ๋‚ด๋ถ€์—์„œ setState()๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ์— ์ง€์—ญ state๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด ์ƒ์„ฑ์ž ๋‚ด์—์„œ this.state์— ์ดˆ๊ธฐ state ๊ฐ’์„ ํ• ๋‹นํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

constructor(props) {
  super(props);
  // ์—ฌ๊ธฐ์„œ this.setState()๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

์ƒ์„ฑ์ž๋Š” this.state๋ฅผ ์ง์ ‘ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์ผํ•œ ๊ณณ์ž…๋‹ˆ๋‹ค. ๊ทธ ์™ธ์˜ ๋ฉ”์„œ๋“œ์—์„œ๋Š” this.setState()๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ƒ์„ฑ์ž ๋‚ด์—์„œ๋Š” ๋ถ€์ˆ˜ ํšจ๊ณผ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๊ฑฐ๋‚˜ ๊ตฌ๋… ์ž‘์—…(subscription)์„ ์ˆ˜ํ–‰ํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๊ฒฝ์šฐ์—๋Š” componentDidMount()๋ฅผ ๋Œ€์‹  ์‚ฌ์šฉํ•˜์„ธ์š”.

์ฃผ์˜

state์— props๋ฅผ ๋ณต์‚ฌํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค! ๊ฐ€์žฅ ํ”ํžˆ ๋ฒ”ํ•˜๋Š” ์‹ค์ˆ˜ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

constructor(props) {
 super(props);
 // ์ด๋ ‡๊ฒŒ ํ•˜์ง€ ๋งˆ์„ธ์š”!
 this.state = { color: props.color };
}

์ด๊ฒƒ์€ ๋ถˆํ•„์š”ํ•œ ์ž‘์—…์ด๋ฉฐ(this.props.color๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค), ๋ฒ„๊ทธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค(color props์˜ ๊ฐ’์ด ๋ณ€ํ•˜๋”๋ผ๋„ state์— ๋ฐ˜์˜๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค).

props์˜ ๊ฐฑ์‹ ์„ ์˜๋„์ ์œผ๋กœ ๋ฌด์‹œํ•ด์•ผ ํ•  ๋•Œ๋งŒ ์ด์™€ ๊ฐ™์€ ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ, ํ•ด๋‹น props์˜ ์ด๋ฆ„์„ initialColor ๋˜๋Š” defaultColor ๋“ฑ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ํŽธ์ด ์ž์—ฐ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์ดํ›„ ํ•„์š”์— ๋”ฐ๋ผ ์ปดํฌ๋„ŒํŠธ๊ฐ€ key๋ฅผ ๋ณ€๊ฒฝํ•˜์—ฌ ์ดˆ๊ธฐ state๋ฅผ โ€œ์žฌ์„ค์ •โ€ํ•˜๋„๋ก ๊ฐ•์ œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

props์˜ ๊ฐ’์— ์˜์กดํ•˜๋Š” state๊ฐ€ ํ•„์š”ํ•  ๋•Œ ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•˜์—ฌ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด, ์šฐ๋ฆฌ๊ฐ€ ์ž‘์„ฑํ•œ state๋กœ๋ถ€ํ„ฐ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค์ง€ ์•Š๋Š” ๋ฒ•์— ๋Œ€ํ•œ ๋ธ”๋กœ๊ทธ ๊ธ€์„ ์ฝ์–ด๋ณด์„ธ์š”.


componentDidMount()

componentDidMount()

componentDidMount()๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋œ ์งํ›„, ์ฆ‰ ํŠธ๋ฆฌ์— ์‚ฝ์ž…๋œ ์งํ›„์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. DOM ๋…ธ๋“œ๊ฐ€ ์žˆ์–ด์•ผ ํ•˜๋Š” ์ดˆ๊ธฐํ™” ์ž‘์—…์€ ์ด ๋ฉ”์„œ๋“œ์—์„œ ์ด๋ฃจ์–ด์ง€๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์™ธ๋ถ€์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์™€์•ผ ํ•œ๋‹ค๋ฉด, ๋„คํŠธ์›Œํฌ ์š”์ฒญ์„ ๋ณด๋‚ด๊ธฐ ์ ์ ˆํ•œ ์œ„์น˜์ž…๋‹ˆ๋‹ค.

์ด ๋ฉ”์„œ๋“œ๋Š” ๋ฐ์ดํ„ฐ ๊ตฌ๋…์„ ์„ค์ •ํ•˜๊ธฐ ์ข‹์€ ์œ„์น˜์ž…๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ๊ตฌ๋…์ด ์ด๋ฃจ์–ด์กŒ๋‹ค๋ฉด, componentWillUnmount()์—์„œ ๊ตฌ๋… ํ•ด์ œ ์ž‘์—…์„ ๋ฐ˜๋“œ์‹œ ์ˆ˜ํ–‰ํ•˜๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

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


componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate()๋Š” ๊ฐฑ์‹ ์ด ์ผ์–ด๋‚œ ์งํ›„์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. ์ด ๋ฉ”์„œ๋“œ๋Š” ์ตœ์ดˆ ๋ Œ๋”๋ง์—์„œ๋Š” ํ˜ธ์ถœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

componentDidUpdate(prevProps) {
  // ์ „ํ˜•์ ์ธ ์‚ฌ์šฉ ์‚ฌ๋ก€ (props ๋น„๊ต๋ฅผ ์žŠ์ง€ ๋งˆ์„ธ์š”)
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

componentDidUpdate()์—์„œ setState()๋ฅผ ์ฆ‰์‹œ ํ˜ธ์ถœํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ์œ„์˜ ์˜ˆ์‹œ์ฒ˜๋Ÿผ ์กฐ๊ฑด๋ฌธ์œผ๋กœ ๊ฐ์‹ธ์ง€ ์•Š์œผ๋ฉด ๋ฌดํ•œ ๋ฐ˜๋ณต์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์— ์ฃผ์˜ํ•˜์„ธ์š”. ๋˜ํ•œ ์ถ”๊ฐ€์ ์ธ ๋ Œ๋”๋ง์„ ์œ ๋ฐœํ•˜์—ฌ, ๋น„๋ก ์‚ฌ์šฉ์ž๋Š” ๋ˆˆ์น˜์ฑ„์ง€ ๋ชปํ• ์ง€๋ผ๋„ ์ปดํฌ๋„ŒํŠธ ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒ์œ„์—์„œ ๋‚ด๋ ค์˜จ prop์„ ๊ทธ๋Œ€๋กœ state์— ์ €์žฅํ•˜๋Š” ๊ฒƒ์€ ์ข‹์ง€ ์•Š์œผ๋ฉฐ, ๊ทธ ๋Œ€์‹  prop์„ ์ง์ ‘ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ์ด์™€ ๊ด€๋ จ๋œ ์ž์„ธํ•œ ์ •๋ณด๋Š” props๋ฅผ state์— ๋ณต์‚ฌํ•˜๋Š” ๊ฒƒ์ด ๋ฒ„๊ทธ๋ฅผ ์œ ๋ฐœํ•˜๋Š” ์ด์œ ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ์—์„œ getSnapshotBeforeUpdate()๋ฅผ ๊ตฌํ˜„ํ•œ๋‹ค๋ฉด, ํ•ด๋‹น ๋ฉ”์„œ๋“œ๊ฐ€ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฐ’์€ componentDidUpdate()์— ์„ธ ๋ฒˆ์งธ โ€œsnapshotโ€ ์ธ์ž๋กœ ๋„˜๊ฒจ์ง‘๋‹ˆ๋‹ค. ๋ฐ˜ํ™˜๊ฐ’์ด ์—†๋‹ค๋ฉด ํ•ด๋‹น ์ธ์ž๋Š” undefined๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

์ฃผ์˜

componentDidUpdate()๋Š” shouldComponentUpdate()๊ฐ€ false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉด ํ˜ธ์ถœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


componentWillUnmount()

componentWillUnmount()

componentWillUnmount()๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ ํ•ด์ œ๋˜์–ด ์ œ๊ฑฐ๋˜๊ธฐ ์ง์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. ์ด ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ ํƒ€์ด๋จธ ์ œ๊ฑฐ, ๋„คํŠธ์›Œํฌ ์š”์ฒญ ์ทจ์†Œ, componentDidMount() ๋‚ด์—์„œ ์ƒ์„ฑ๋œ ๊ตฌ๋… ํ•ด์ œ ๋“ฑ ํ•„์š”ํ•œ ๋ชจ๋“  ์ •๋ฆฌ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜์„ธ์š”.

์ด์ œ ์ปดํฌ๋„ŒํŠธ๋Š” ๋‹ค์‹œ ๋ Œ๋”๋ง๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ, componentWillUnmount() ๋‚ด์—์„œ setState()๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค๊ฐ€ ๋งˆ์šดํŠธ ํ•ด์ œ๋˜๊ณ  ๋‚˜๋ฉด, ์ ˆ๋Œ€๋กœ ๋‹ค์‹œ ๋งˆ์šดํŠธ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


์ž˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ

์ด ์„น์…˜์—์„œ ๋‹ค๋ฃจ๋Š” ๋ฉ”์„œ๋“œ๋“ค์€ ์ž˜ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์•„์ฃผ ๊ฐ€๋” ์žˆ์ง€๋งŒ, ๋Œ€๋ถ€๋ถ„์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๋ฉ”์„œ๋“œ๋“ค์€ ์ด ์ƒ๋ช…์ฃผ๊ธฐ ๋„ํ‘œ์˜ ์ตœ์ƒ๋‹จ์— ์œ„์น˜ํ•˜๋Š” โ€œ๋œ ์ผ๋ฐ˜์ ์ธ ๋ผ์ดํ”„ ์‚ฌ์ดํด ํ‘œ์‹œโ€ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate()๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ˜„์žฌ state ๋˜๋Š” props์˜ ๋ณ€ํ™”๊ฐ€ ์ปดํฌ๋„ŒํŠธ์˜ ์ถœ๋ ฅ ๊ฒฐ๊ณผ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ React๊ฐ€ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๋™์ž‘์€ ๋งค state ๋ณ€ํ™”๋งˆ๋‹ค ๋‹ค์‹œ ๋ Œ๋”๋ง์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒƒ์ด๋ฉฐ, ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๊ธฐ๋ณธ ๋™์ž‘์— ๋”ฐ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

shouldComponentUpdate()๋Š” props ๋˜๋Š” state๊ฐ€ ์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ๊ฐฑ์‹ ๋˜์–ด์„œ ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜๊ธฐ ์ง์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ๊ฐ’์€ true์ž…๋‹ˆ๋‹ค. ์ด ๋ฉ”์„œ๋“œ๋Š” ์ดˆ๊ธฐ ๋ Œ๋”๋ง ๋˜๋Š” forceUpdate()๊ฐ€ ์‚ฌ์šฉ๋  ๋•Œ์—๋Š” ํ˜ธ์ถœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

์ด ๋ฉ”์„œ๋“œ๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•  ์ž์‹ ์ด ์žˆ๋‹ค๋ฉด, this.props์™€ nextProps, ๊ทธ๋ฆฌ๊ณ  this.state์™€ nextState๋ฅผ ๋น„๊ตํ•œ ๋’ค false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ์œผ๋กœ React๊ฐ€ ๊ฐฑ์‹  ์ž‘์—…์„ ๊ฑด๋„ˆ๋›ฐ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ์ด ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ๊ฐ์ž๊ฐ€ ๊ฐ€์ง„ state์˜ ๋ณ€ํ™”์— ๋”ฐ๋ผ ๋‹ค์‹œ ๋ Œ๋”๋ง์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒƒ์„ ๋ง‰๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋ผ๋Š” ์ ์— ์ฃผ์˜ํ•˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

shouldComponentUpdate() ๋‚ด์—์„œ ๊นŠ์€ ๋™์ผ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ฑฐ๋‚˜ JSON.stringify()๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์•„์ฃผ ๋น„ํšจ์œจ์ ์ด๋ฉฐ ์„ฑ๋Šฅ์„ ๋–จ์–ดํŠธ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ, shouldComponentUpdate()๊ฐ€ false๋ฅผ ๋ฐ˜ํ™˜ํ•  ๊ฒฝ์šฐ UNSAFE_componentWillUpdate(), render(), ๊ทธ๋ฆฌ๊ณ  componentDidUpdate()๋Š” ํ˜ธ์ถœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚˜์ค‘์—๋Š” shouldComponentUpdate()๋ฅผ ์—„๊ฒฉํ•œ ์ง€์‹œ์ž๊ฐ€ ์•„๋‹Œ ํžŒํŠธ๋กœ์„œ ๋‹ค๋ฃจ๊ฒŒ ๋  ๊ฒƒ์ด๊ณ , false์˜ ๋ฐ˜ํ™˜์„ ๋ฐ˜ํ™˜ํ•˜๋”๋ผ๋„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ณ„์†ํ•ด์„œ ๋‹ค์‹œ ๋ Œ๋”๋ง์„ ์ˆ˜ํ–‰ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.


static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps๋Š” ์ตœ์ดˆ ๋งˆ์šดํŠธ ์‹œ์™€ ๊ฐฑ์‹  ์‹œ ๋ชจ๋‘์—์„œ render ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๊ธฐ ์ง์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. state๋ฅผ ๊ฐฑ์‹ ํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ฑฐ๋‚˜, null์„ ๋ฐ˜ํ™˜ํ•˜์—ฌ ์•„๋ฌด ๊ฒƒ๋„ ๊ฐฑ์‹ ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฉ”์„œ๋“œ๋Š” ์‹œ๊ฐ„์ด ํ๋ฆ„์— ๋”ฐ๋ผ ๋ณ€ํ•˜๋Š” props์— state๊ฐ€ ์˜์กดํ•˜๋Š” ์•„์ฃผ ๋“œ๋ฌธ ์‚ฌ์šฉ๋ก€๋ฅผ ์œ„ํ•˜์—ฌ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฌด์—‡์„ ์›€์ง์ด๋„๋ก ๋งŒ๋“ค์ง€ ๊ฒฐ์ •ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ์ด์ „๊ณผ ํ˜„์žฌ์˜ ์ž์‹ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋น„๊ตํ•˜๋Š” <Transition>์™€ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌํ˜„ํ•  ๋•Œ์— ํŽธ๋ฆฌํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

  • props ๋ณ€ํ™”์— ๋Œ€์‘ํ•œ ๋ถ€์ˆ˜ ํšจ๊ณผ๋ฅผ ๋ฐœ์ƒ์‹œ์ผœ์•ผ ํ•œ๋‹ค๋ฉด (์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ๋˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜), componentDidUpdate ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ๋Œ€์‹ ํ•ด์„œ ์‚ฌ์šฉํ•˜์„ธ์š”.
  • props๊ฐ€ ๋ณ€ํ™”ํ–ˆ์„ ๋•Œ์—๋งŒ ์ผ๋ถ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค์‹œ ๊ณ„์‚ฐ ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, Memoization Helper๋ฅผ ๋Œ€์‹ ํ•ด์„œ ์‚ฌ์šฉํ•˜์„ธ์š”.
  • props๊ฐ€ ๋ณ€ํ™”ํ•  ๋•Œ์— ์ผ๋ถ€ state๋ฅผ ์žฌ์„ค์ • ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, ์™„์ „ ์ œ์–ด ์ปดํฌ๋„ŒํŠธ ๋˜๋Š” key๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์™„์ „ ๋น„์ œ์–ด ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•˜์„ธ์š”.

์ด ๋ฉ”์„œ๋“œ๋Š” ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ธ์Šคํ„ด์Šค ์ ‘๊ทผ์ด ํ•„์š”ํ•˜๋‹ค๋ฉด, class ์ •์˜ ์™ธ๋ถ€์—์„œ ์ปดํฌ๋„ŒํŠธ์˜ props์™€ state์— ๋Œ€ํ•œ ์ˆœ์ˆ˜ ํ•จ์ˆ˜๋ฅผ ์ถ”์ถœํ•˜์—ฌ getDerivedStateFromProps()์™€ ๋‹ค๋ฅธ ํด๋ž˜์Šค ๋ฉ”์„œ๋“œ ๊ฐ„์— ์ฝ”๋“œ๋ฅผ ๊ณต์œ  ๋ฐ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฉ”์„œ๋“œ๋Š” ์ด์œ ์™€ ์ƒ๊ด€์—†์ด ๋ Œ๋”๋ง ๋•Œ๋งˆ๋‹ค ๋งค๋ฒˆ ์‹คํ–‰๋˜๋ฏ€๋กœ ์ฃผ์˜ํ•˜์„ธ์š”. ์ด๋Š” UNSAFE_componentWillReceiveProps์™€๋Š” ๋‹ค๋ฅธ๋ฐ, ์ด ๋ฉ”์„œ๋“œ์˜ ๊ฒฝ์šฐ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ค์‹œ ๋ Œ๋”๋ง์„ ๋ฐœ์ƒ์‹œ์ผฐ์„ ๋•Œ์—๋งŒ ์‹คํ–‰๋˜๊ณ , ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ ์ง€์—ญ์ ์ธ setState๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ์—๋Š” ์‹คํ–‰๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)

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

์ด ๋ฉ”์„œ๋“œ์— ๋Œ€ํ•œ ์‚ฌ์šฉ๋ก€๋Š” ํ”ํ•˜์ง€ ์•Š์ง€๋งŒ, ์ฑ„ํŒ… ํ™”๋ฉด์ฒ˜๋Ÿผ ์Šคํฌ๋กค ์œ„์น˜๋ฅผ ๋”ฐ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ์ž‘์—…์ด ํ•„์š”ํ•œ UI ๋“ฑ์„ ์ƒ๊ฐํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์Šค๋ƒ…์ƒท ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๊ฑฐ๋‚˜ null์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ์šฉํ•˜๋Š” ์˜ˆ์‹œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

์œ„์˜ ์˜ˆ์‹œ์—์„œ๋Š” getSnapshotBeforeUpdate์˜ scrollHeight ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ์•„๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ๋ฐ, render์™€ ๊ฐ™์€ โ€œ๋ Œ๋”๋งโ€ ๋‹จ๊ณ„์˜ ์ƒ๋ช…์ฃผ๊ธฐ์™€ getSnapshotBeforeUpdate์™€ componentDidUpdate์™€ ๊ฐ™์€ โ€œ์ปค๋ฐ‹โ€ ๋‹จ๊ณ„์˜ ์ƒ๋ช…์ฃผ๊ธฐ ๊ฐ„์— ์ง€์—ฐ ์‹œ๊ฐ„์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.


Error Boundary

Error boundary๋Š” ์ž์‹ ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ ๋‚ด์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜ค๋ฅ˜๋ฅผ ๊ฐ์ง€ํ•˜๊ณ , ํ•ด๋‹น ์˜ค๋ฅ˜๋ฅผ ๊ธฐ๋กํ•˜๋ฉฐ, ์ถฉ๋Œ์ด ๋ฐœ์ƒํ•œ ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ๋ฅผ ๋Œ€์‹ ํ•˜์—ฌ ๋Œ€์ฒด UI๋ฅผ ํ‘œ์‹œํ•˜๋Š” React ์ปดํฌ๋„ŒํŠธ์ž…๋‹ˆ๋‹ค. Error boundary์˜ ํ•˜์œ„ ํŠธ๋ฆฌ์— ์กด์žฌํ•˜๋Š” ๋ Œ๋”๋ง ๊ณผ์ •, ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ, ๋ชจ๋“  ์ƒ์„ฑ์ž์— ๋Œ€ํ•˜์—ฌ ์˜ค๋ฅ˜๋ฅผ ๊ฐ์ง€ํ•ด๋ƒ…๋‹ˆ๋‹ค.

ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์— static getDerivedStateFromError() ๋˜๋Š” componentDidCatch()๋ฅผ ์ •์˜ํ•  ๊ฒฝ์šฐ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋Š” Error boundary๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ๋‘ ์ƒ๋ช…์ฃผ๊ธฐ ๋‚ด์—์„œ state๋ฅผ ๊ฐฑ์‹ ํ•˜๊ฒŒ ๋˜๋ฉด ํ•˜์œ„ ํŠธ๋ฆฌ ๋‚ด์˜ ์ฒ˜๋ฆฌ๋˜์ง€ ์•Š์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๊ณ , ๋Œ€์ฒด UI๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

๋ฐ˜๋“œ์‹œ Error boundary๋Š” ์˜ˆ์ธกํ•˜์ง€ ์•Š์€ ์˜ˆ์™ธ๋ฅผ ์ฒ˜๋ฆฌํ•˜์—ฌ ๋ณต๊ตฌํ•˜๋Š” ๊ฒฝ์šฐ์—๋งŒ ์‚ฌ์šฉํ•˜๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์ œ์–ด ํ๋ฆ„์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐ์—๋Š” ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”.

์ž์„ธํ•œ ์ •๋ณด๋Š” React 16์—์„œ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋ฌธ์„œ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์˜

Error boundary๋Š” ํŠธ๋ฆฌ ๋‚ด์—์„œ ์ž์‹ ๋ณด๋‹ค ํ•˜์œ„์— ์กด์žฌํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ ์˜ค๋ฅ˜๋งŒ์„ ๊ฐ์ง€ํ•ด๋ƒ…๋‹ˆ๋‹ค. ์ฆ‰, Error boundary๋Š” ์ž๊ธฐ ์ž์‹ ์— ๋Œ€ํ•œ ์˜ค๋ฅ˜๋ฅผ ๊ฐ์ง€ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

static getDerivedStateFromError()

static getDerivedStateFromError(error)

์ด ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋Š” ํ•˜์œ„์˜ ์ž์† ์ปดํฌ๋„ŒํŠธ์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. ์ด ๋ฉ”์„œ๋“œ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์˜ค๋ฅ˜๋ฅผ ์ „๋‹ฌ๋ฐ›๊ณ , ๊ฐฑ์‹ ๋œ state ๊ฐ’์„ ๋ฐ˜๋“œ์‹œ ๋ฐ˜ํ™˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {    // state๋ฅผ ๊ฐฑ์‹ ํ•˜์—ฌ ๋‹ค์Œ ๋ Œ๋”๋ง์—์„œ ๋Œ€์ฒด UI๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.    return { hasError: true };  }
  render() {
    if (this.state.hasError) {      // ๋ณ„๋„๋กœ ์ž‘์„ฑํ•œ ๋Œ€์ฒด UI๋ฅผ ๋ Œ๋”๋งํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.      return <h1>Something went wrong.</h1>;    }
    return this.props.children;
  }
}

์ฃผ์˜

getDerivedStateFromError()๋Š” โ€œrenderโ€ ๋‹จ๊ณ„์—์„œ ํ˜ธ์ถœ๋˜๋ฏ€๋กœ, ๋ถ€์ˆ˜ ํšจ๊ณผ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๊ฒฝ์šฐ์—๋Š” componentDidCatch()๋ฅผ ๋Œ€์‹  ์‚ฌ์šฉํ•˜์„ธ์š”.


componentDidCatch()

componentDidCatch(error, info)

์ด ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋Š” ์ž์† ์ปดํฌ๋„ŒํŠธ์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ์— ํ˜ธ์ถœ๋˜๋ฉฐ, 2๊ฐœ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ „๋‹ฌ๋ฐ›์Šต๋‹ˆ๋‹ค.

  1. error - ๋ฐœ์ƒํ•œ ์˜ค๋ฅ˜
  2. info - ์–ด๋–ค ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œ์ผฐ๋Š”์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ํฌํ•จํ•œ componentStack ํ‚ค๋ฅผ ๊ฐ–๊ณ  ์žˆ๋Š” ๊ฐ์ฒด

componentDidCatch()๋Š” โ€œ์ปค๋ฐ‹โ€ ๋‹จ๊ณ„์—์„œ ํ˜ธ์ถœ๋˜๋ฏ€๋กœ, ๋ถ€์ˆ˜ ํšจ๊ณผ๋ฅผ ๋ฐœ์ƒ์‹œ์ผœ๋„ ๋ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด ์˜ค๋ฅ˜ ๋กœ๊ทธ ๊ธฐ๋ก ๋“ฑ์„ ์œ„ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // state๋ฅผ ๊ฐฑ์‹ ํ•˜์—ฌ ๋‹ค์Œ ๋ Œ๋”๋ง์—์„œ ๋Œ€์ฒด UI๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.
    return { hasError: true };
  }

  componentDidCatch(error, info) {    // Example "componentStack":    //   in ComponentThatThrows (created by App)    //   in ErrorBoundary (created by App)    //   in div (created by App)    //   in App    logComponentStackToMyService(info.componentStack);  }
  render() {
    if (this.state.hasError) {
      // ๋ณ„๋„๋กœ ์ž‘์„ฑํ•œ ๋Œ€์ฒด UI๋ฅผ ๋ Œ๋”๋งํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

React์˜ componentDidCatch()๊ฐ€ ์˜ค๋ฅ˜๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ์‹์€ ํ”„๋กœ๋•์…˜๊ณผ ๊ฐœ๋ฐœ ๋นŒ๋“œ๊ฐ€ ์•ฝ๊ฐ„ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ ๋นŒ๋“œ์—์„œ, ์˜ค๋ฅ˜๋Š” window๊นŒ์ง€ ์ „ํŒŒ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” window.onerror๋‚˜ window.addEventListener('error', callback)๊ฐ€ componentDidCatch()์—์„œ ์žก์€ ์˜ค๋ฅ˜๋ฅผ ์ธํ„ฐ์…‰ํŠธํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ์—์„œ ์˜ค๋ฅ˜๋Š” ์ „ํŒŒ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ฆ‰ ์ƒ์œ„ ์˜ค๋ฅ˜ ํ•ธ๋“ค๋Ÿฌ๋Š” componentDidCatch()์— ์˜ํ•ด ๋ช…์‹œ์ ์œผ๋กœ ์žกํžˆ์ง€ ์•Š์€ ์˜ค๋ฅ˜๋งŒ ๋ฐ›์Šต๋‹ˆ๋‹ค.

์ฃผ์˜

์˜ค๋ฅ˜ ์ด๋ฒคํŠธ ๋‚ด์—์„œ๋Š” setState()์˜ ํ˜ธ์ถœ์„ ํ†ตํ•˜์—ฌ componentDidCatch()๋กœ ๊ตฌํ˜„๋œ ๋Œ€์ฒด UI๋ฅผ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋Ÿฐ ๋ฐฉ์‹์€ ์ดํ›„์˜ ๋ฆด๋ฆฌ์ฆˆ์—์„œ๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋Œ€์ฒด UI ๋ Œ๋”๋ง ์ œ์–ด๋ฅผ ํ•˜๋ ค๋ฉด static getDerivedStateFromError()๋ฅผ ๋Œ€์‹  ์‚ฌ์šฉํ•˜์„ธ์š”.


๋ ˆ๊ฑฐ์‹œ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ

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

UNSAFE_componentWillMount()

UNSAFE_componentWillMount()

์ฃผ์˜

์ด ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ์˜ ๊ธฐ์กด ์ด๋ฆ„์€ componentWillMount์ž…๋‹ˆ๋‹ค. ์ด ์ด๋ฆ„์€ ๋ฒ„์ „ 17๊นŒ์ง€ ๊ทธ๋Œ€๋กœ ์œ ์ง€๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. rename-unsafe-lifecycles codemod๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ตœ์‹  ๋ฌธ๋ฒ•์œผ๋กœ ์ž๋™ ๊ฐฑ์‹ ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

UNSAFE_componentWillMount()๋Š” ๋งˆ์šดํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. render()๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์ „์— ํ˜ธ์ถœ๋˜๋ฏ€๋กœ, ์ด ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ setState()๋ฅผ ๋™๊ธฐ์ ์œผ๋กœ ํ˜ธ์ถœํ•˜๋”๋ผ๋„ ์ถ”๊ฐ€์ ์ธ ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. state๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ๊ฒฝ์šฐ๋ผ๋ฉด, ๋ณดํ†ต์€ constructor()๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

์ด ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ ๋ถ€์ˆ˜ ํšจ๊ณผ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๊ฑฐ๋‚˜ ๊ตฌ๋… ์ž‘์—…(subscription)์„ ์ˆ˜ํ–‰ํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๊ฒฝ์šฐ์—๋Š” componentDidMount()๋ฅผ ๋Œ€์‹  ์‚ฌ์šฉํ•˜์„ธ์š”.

์ด ๋ฉ”์„œ๋“œ๋Š” ์„œ๋ฒ„ ๋ Œ๋”๋ง์—์„œ ํ˜ธ์ถœ๋˜๋Š” ์œ ์ผํ•œ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.


UNSAFE_componentWillReceiveProps()

UNSAFE_componentWillReceiveProps(nextProps)

์ฃผ์˜

์ด ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ์˜ ๊ธฐ์กด ์ด๋ฆ„์€ componentWillReceiveProps์ž…๋‹ˆ๋‹ค. ์ด ์ด๋ฆ„์€ ๋ฒ„์ „ 17๊นŒ์ง€ ๊ทธ๋Œ€๋กœ ์œ ์ง€๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. rename-unsafe-lifecycles codemod๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ตœ์‹  ๋ฌธ๋ฒ•์œผ๋กœ ์ž๋™ ๊ฐฑ์‹ ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์˜

์ด ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฒ„๊ทธ๋ฅผ ๋งŒ๋“ค๊ฑฐ๋‚˜, ์ผ๊ด€์„ฑ์„ ํ•ด์น  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • props ๋ณ€ํ™”์— ๋Œ€์‘ํ•œ ๋ถ€์ˆ˜ ํšจ๊ณผ๋ฅผ ๋ฐœ์ƒ์‹œ์ผœ์•ผ ํ•œ๋‹ค๋ฉด (์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ๋˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜), componentDidUpdate ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ๋Œ€์‹ ํ•ด์„œ ์‚ฌ์šฉํ•˜์„ธ์š”.
  • props๊ฐ€ ๋ณ€ํ™”ํ•  ๋•Œ์— ์ผ๋ถ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค์‹œ ๊ณ„์‚ฐํ•˜๊ธฐ ์œ„ํ•˜์—ฌ componentWillReceiveProps๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค๋ฉด, Memoization Helper๋ฅผ ๋Œ€์‹ ํ•ด์„œ ์‚ฌ์šฉํ•˜์„ธ์š”.
  • props๊ฐ€ ๋ณ€ํ™”ํ•  ๋•Œ์— ์ผ๋ถ€ state๋ฅผ ์žฌ์„ค์ •ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ componentWillReceiveProps๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค๋ฉด, ์™„์ „ ์ œ์–ด ์ปดํฌ๋„ŒํŠธ ๋˜๋Š” key๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์™„์ „ ๋น„์ œ์–ด ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•˜์„ธ์š”.

๋‹ค๋ฅธ ์‚ฌ์šฉ ์‚ฌ๋ก€์˜ ๊ฒฝ์šฐ๋Š” ๊ฐ€์ ธ์˜จ state์— ๋Œ€ํ•˜์—ฌ ๋‹ค๋ฃฌ ๋ธ”๋กœ๊ทธ ๊ธ€์—์„œ ์ถ”์ฒœํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋”ฐ๋ฅด์„ธ์š”.

UNSAFE_componentWillReceiveProps()๋Š” ๋งˆ์šดํŠธ๋œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒˆ๋กœ์šด props๋ฅผ ์ „๋‹ฌ๋ฐ›๊ธฐ ์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. props ๋ณ€ํ™”์— ๋Œ€์‘ํ•˜์—ฌ state๋ฅผ ๊ฐฑ์‹ ํ•ด์•ผ ํ•œ๋‹ค๋ฉด(์˜ˆ๋ฅผ ๋“ค์–ด, state๋ฅผ ์žฌ์„ค์ •ํ•˜๊ธฐ), this.props์™€ nextProps๋ฅผ ๋น„๊ตํ•˜๊ณ  ์ด ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ this.setState()๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ state๋ฅผ ๋ฐ”๊พธ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๊ฒŒ ๋งŒ๋“  ๊ฒฝ์šฐ, props๊ฐ€ ๋ณ€ํ™”ํ•˜์ง€ ์•Š์•˜๋”๋ผ๋„ ์ด ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค๋Š” ์ ์— ์ฃผ์˜ํ•˜์„ธ์š”. ๋ณ€ํ™”๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ๋งŒ ๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰์‹œํ‚ค๋ ค๋ฉด ๋ฐ˜๋“œ์‹œ props์˜ ํ˜„์žฌ๊ฐ’๊ณผ ๋‹ค์Œ๊ฐ’์„ ๋น„๊ตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

React๋Š” ๋งˆ์šดํŒ…ํ•  ๋•Œ์—์„œ๋Š” UNSAFE_componentWillReceiveProps()๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š์œผ๋ฉฐ, ์ดˆ๊ธฐ props๋ฅผ ๊ฐ€์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋˜๋Š” ๊ฒฝ์šฐ๋Š” ์ปดํฌ๋„ŒํŠธ์˜ props๊ฐ€ ๋ณ€ํ™”ํ–ˆ์„ ๋•Œ์ž…๋‹ˆ๋‹ค. this.setState()๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด, ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ UNSAFE_componentWillReceiveProps()๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


UNSAFE_componentWillUpdate()

UNSAFE_componentWillUpdate(nextProps, nextState)

์ฃผ์˜

์ด ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ์˜ ๊ธฐ์กด ์ด๋ฆ„์€ componentWillUpdate์ž…๋‹ˆ๋‹ค. ์ด ์ด๋ฆ„์€ ๋ฒ„์ „ 17๊นŒ์ง€ ๊ทธ๋Œ€๋กœ ์œ ์ง€๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. rename-unsafe-lifecycles codemod๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ตœ์‹  ๋ฌธ๋ฒ•์œผ๋กœ ์ž๋™ ๊ฐฑ์‹ ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

UNSAFE_componentWillUpdate()๋Š” ์ƒˆ๋กœ์šด props ๋˜๋Š” state๊ฐ€ ์ „๋‹ฌ๋˜์–ด์„œ ๋ Œ๋”๋ง์ด ์ด๋ฃจ์–ด์ง€๊ธฐ ์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. ์ด ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ ๊ฐฑ์‹ ์ด ์ด๋ฃจ์–ด์ง€๊ธฐ ์ „์— ๋ฏธ๋ฆฌ ์ค€๋น„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฉ”์„œ๋“œ๋Š” ์ดˆ๊ธฐ ๋ Œ๋”๋ง์—์„œ๋Š” ํ˜ธ์ถœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ๋Š” this.setState()๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์—†๋‹ค๋Š” ์ ์— ์ฃผ์˜ํ•˜์„ธ์š”. ๋˜ํ•œ React ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ฐฑ์‹ ๋˜๋„๋ก ๋งŒ๋“œ๋Š” ๊ทธ ์–ด๋–ค ์ž‘์—…(์˜ˆ๋ฅผ ๋“ค์–ด, Redux Action์„ Dispatchํ•˜๊ธฐ)๋„ UNSAFE_componentWillUpdate()๊ฐ€ ๊ฒฐ๊ณผ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๊ธฐ ์ „์—๋Š” ์ด๋ฃจ์–ด์ง€๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

ํ†ต์ƒ์ ์œผ๋กœ ์ด ๋ฉ”์„œ๋“œ๋Š” componentDidUpdate()๋กœ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ DOM์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์–ป๋Š”๋‹ค๋ฉด(์˜ˆ๋ฅผ ๋“ค์–ด, ์Šคํฌ๋กค ์œ„์น˜ ์ €์žฅํ•˜๊ธฐ), ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ getSnapshotBeforeUpdate()๋กœ ์ด์ „ํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

Note

UNSAFE_componentWillUpdate()๋Š” shouldComponentUpdate()์ด false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค๋ฉด ํ˜ธ์ถœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


๊ธฐํƒ€ API

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

๋‹จ 2๊ฐœ์˜ ๋ฉ”์„œ๋“œ, setState()์™€ forceUpdate()๋งŒ์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

setState()

setState(updater, [callback])

setState()๋Š” ์ปดํฌ๋„ŒํŠธ state์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๋Œ€๊ธฐ์—ด์— ์ง‘์–ด๋„ฃ๊ณ , React์—๊ฒŒ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์™€ ๊ทธ ์ž์‹๋“ค์ด ๊ฐฑ์‹ ๋œ state๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์‹œ ๋ Œ๋”๋ง๋˜์–ด์•ผ ํ•œ๋‹ค๊ณ  ์•Œ๋ฆฝ๋‹ˆ๋‹ค. ์ด ๋ฉ”์„œ๋“œ๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์™€ ์„œ๋ฒ„ ์‘๋‹ต ๋“ฑ์— ๋”ฐ๋ผ UI๋ฅผ ๊ฐฑ์‹ ํ•  ๋•Œ์— ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค.

setState()๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐฑ์‹ ํ•˜๋Š” ๋ฐ์— ์žˆ์–ด ์ฆ‰๊ฐ์ ์ธ ๋ช…๋ น์ด ์•„๋‹ˆ๋ผ ์š”์ฒญ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์ธ์ง€ ์„ฑ๋Šฅ(Perceived Performance)์˜ ํ–ฅ์ƒ์„ ์œ„ํ•˜์—ฌ React๋Š” ์ด ๋ฉ”์„œ๋“œ์˜ ์‹คํ–‰์„ ์ง€์—ฐ์‹œํ‚ค๊ณ  ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•œ๋ฒˆ์— ๊ฐฑ์‹ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. React๋Š” state ๋ณ€ํ™”๊ฐ€ ์ฆ‰์‹œ ์ ์šฉ๋˜๋Š” ๊ฒƒ์„ ๋ณด์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

setState()๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•ญ์ƒ ์ฆ‰๊ฐ์ ์œผ๋กœ ๊ฐฑ์‹ ํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ์˜คํžˆ๋ ค ์—ฌ๋Ÿฌ ๋ณ€๊ฒฝ ์‚ฌํ•ญ๊ณผ ํ•จ๊ป˜ ์ผ๊ด„์ ์œผ๋กœ ๊ฐฑ์‹ ํ•˜๊ฑฐ๋‚˜, ๋‚˜์ค‘์œผ๋กœ ๋ฏธ๋ฃฐ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•˜์—ฌ setState()๋ฅผ ํ˜ธ์ถœํ•˜์ž๋งˆ์ž this.state์— ์ ‘๊ทผํ•˜๋Š” ๊ฒƒ์ด ์ž ์žฌ์ ์ธ ๋ฌธ์ œ๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๋Œ€์‹ ์— componentDidUpdate ๋˜๋Š” setState์˜ ์ฝœ๋ฐฑ(setState(updater, callback))์„ ์‚ฌ์šฉํ•˜์„ธ์š”. ๋‘˜ ๋‹ค ๊ฐฑ์‹ ์ด ์ ์šฉ๋œ ๋’ค์— ์‹คํ–‰๋˜๋Š” ๊ฒƒ์ด ๋ณด์žฅ๋ฉ๋‹ˆ๋‹ค. ์ด์ „ state ๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ state ๊ฐ’์„ ์„ค์ •ํ•ด์•ผ ํ•œ๋‹ค๋ฉด, ์•„๋ž˜์— ์„ค๋ช…๋œ updater ์ธ์ž์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ์ฝ์–ด๋ณด์„ธ์š”.

shouldComponentUpdate()๊ฐ€ false๋ฅผ ๋ฐ˜ํ™˜ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด setState()๋Š” ํ•ญ์ƒ ๋ Œ๋”๋ง์ด ๋‹ค์‹œ ๋ฐœ์ƒํ•˜๋„๋ก ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๊ฐ€๋ณ€ ๊ฐ์ฒด์˜ ์‚ฌ์šฉ์œผ๋กœ ์ธํ•˜์—ฌ shouldComponentUpdate() ๋‚ด์—์„œ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์—†๋‹ค๋ฉด, ์ƒˆ๋กœ์šด state๊ฐ€ ์ด์ „์˜ state์™€ ๋‹ค๋ฅผ ๋•Œ์—๋งŒ setState()๋ฅผ ํ˜ธ์ถœํ•˜์„ธ์š”. ๊ทธ๋ž˜์•ผ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ๋‹ค์‹œ ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ฒซ๋ฒˆ์งธ ์ธ์ž updater๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ˜•ํƒœ๋ฅผ ๊ฐ€์ง€๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

(state, props) => stateChange

state๋Š” ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์ ์šฉ๋˜๋Š” ์‹œ์ ์— ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ฐ€์ง€๋Š” state์— ๋Œ€ํ•œ ์ฐธ์กฐ์ž…๋‹ˆ๋‹ค. state๋Š” ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ๋Œ€์‹ , ์ „๋‹ฌ๋œ state์™€ props๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ํ‘œํ˜„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, props.step๋งŒํผ state์˜ ์–ด๋–ค ๊ฐ’์„ ์ฆ๊ฐ€์‹œํ‚ค๊ณ  ์‹ถ์€ ์ƒํ™ฉ์„ ๊ฐ€์ •ํ•ด๋ด…์‹œ๋‹ค.

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

updater ํ•จ์ˆ˜๋กœ ์ „๋‹ฌ๋œ state์™€ props๋Š” ์ตœ์‹ ๊ฐ’์ž„์ด ๋ณด์žฅ๋ฉ๋‹ˆ๋‹ค. updater์˜ ๊ฒฐ๊ณผ๋Š” state์— ์–•๊ฒŒ ๋ณ‘ํ•ฉ๋ฉ๋‹ˆ๋‹ค.

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

setState()์— ์ „๋‹ฌํ•˜๋Š” ์ฒซ๋ฒˆ์งธ ์ธ์ž๋กœ ์•„๋ž˜์™€ ๊ฐ™์ด ๊ฐ์ฒด๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

setState(stateChange[, callback])

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด stateChange ๊ฐ์ฒด๋Š” ์ƒˆ๋กœ์šด state์— ์–•๊ฒŒ ๋ณ‘ํ•ฉ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์‡ผํ•‘ ์นดํŠธ์˜ ์ƒํ’ˆ ์ˆ˜๋Ÿ‰(quantity)์„ ์กฐ์ •ํ•˜๋ ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

this.setState({quantity: 2})

์ด๋Ÿฌํ•œ ํ˜•ํƒœ์˜ setState()๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ˆ˜ํ–‰๋˜๋ฉฐ, ๊ฐ™์€ ์ฃผ๊ธฐ ๋™์•ˆ ์—ฌ๋Ÿฌ๋ฒˆ ํ˜ธ์ถœ๋œ๋‹ค๋ฉด ์ผ๊ด„์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๊ฐ™์€ ์ฃผ๊ธฐ ๋™์•ˆ ์ƒํ’ˆ ์ˆ˜๋Ÿ‰์„ ํ•œ๋ฒˆ ์ด์ƒ ์ฆ๊ฐ€์‹œํ‚ค๊ฒŒ ๋˜๋ฉด, ์•„๋ž˜์˜ ์ฝ”๋“œ์™€ ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

setState์˜ ์—ฐ์ด์€ ํ˜ธ์ถœ์€ ๊ฐ™์€ ์ฃผ๊ธฐ ๋‚ด์˜ ๋ฐ”๋กœ ์ง์ „ ํ˜ธ์ถœ ๊ฒฐ๊ณผ๋ฅผ ๋ฎ์–ด์“ฐ๊ณ , ๋”ฐ๋ผ์„œ ์ˆ˜๋Ÿ‰๊ฐ’์ด ํ•œ๋ฒˆ๋งŒ ์ฆ๊ฐ€๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ state์˜ ๊ฐ’์ด ์ด์ „ state์˜ ๊ฐ’์— ๊ธฐ๋ฐ˜ํ•œ๋‹ค๋ฉด, ์•„๋ž˜์™€ ๊ฐ™์ด updater์˜ ํ•จ์ˆ˜ ํ˜•ํƒœ๋ฅผ ๋Œ€์‹  ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

์ž์„ธํ•œ ์ •๋ณด๋Š” ์•„๋ž˜์˜ ๋ฌธ์„œ๋“ค์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


forceUpdate()

component.forceUpdate(callback)

์ปดํฌ๋„ŒํŠธ์˜ state ๋˜๋Š” props๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ค์‹œ ๋ Œ๋”๋ง๋˜๋Š” ๊ฒƒ์ด ๊ธฐ๋ณธ ๋™์ž‘์ž…๋‹ˆ๋‹ค. ์–ด๋–ค ์ปดํฌ๋„ŒํŠธ์˜ render() ๋ฉ”์„œ๋“œ๊ฐ€ ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ๊ฐ’์— ์˜์กดํ•˜๋Š” ๊ฒฝ์šฐ, React๋กœ ํ•˜์—ฌ๊ธˆ forceUpdate()๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋ Œ๋”๋ง์„ ๋‹ค์‹œ ์ˆ˜ํ–‰ํ•˜๋„๋ก ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

forceUpdate()๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ์˜ render()๊ฐ€ ํ˜ธ์ถœ๋˜๋Š”๋ฐ, ์ด๋•Œ shouldComponentUpdate()๋Š” ๋ฌด์‹œํ•˜๊ณ  ๊ฑด๋„ˆ๋œ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋“ค์— ๋Œ€ํ•˜์—ฌ ํ†ต์ƒ์ ์ธ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๊ฐ€ ์‹คํ–‰๋˜๋Š”๋ฐ, ์—ฌ๊ธฐ์—๋Š” ๊ฐœ๋ณ„ ์ž์‹๋“ค์˜ shouldComponentUpdate()๋„ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. React๋Š” ๋งˆํฌ์—…์ด ๋ณ€ํ™”ํ–ˆ์„ ๋•Œ์—๋งŒ DOM์„ ๊ฐฑ์‹ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ณดํ†ต render() ๋‚ด์—์„œ๋Š” forceUpdate()๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋ง์•„์•ผ ํ•˜๋ฉฐ, ์˜ค์ง this.props์™€ this.state์˜ ๊ฐ’๋งŒ์„ ์‚ฌ์šฉํ•˜์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.


class ํ”„๋กœํผํ‹ฐ

defaultProps

defaultProps๋Š” ์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค ์ž์ฒด ๋‚ด์—์„œ ํ”„๋กœํผํ‹ฐ๋กœ์„œ ์ •์˜๋  ์ˆ˜ ์žˆ๊ณ , ์ด๋ฅผ ํ†ตํ•˜์—ฌ ํ•ด๋‹น class์˜ ๊ธฐ๋ณธ props ๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์‹œ์™€ ๊ฐ™์ด, null์ด ์•„๋‹Œ ์•„์ง ์ •์˜๋˜์ง€ ์•Š์€ undefined์ธ props๋ฅผ ๋‹ค๋ฃฐ ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

props.color์— ๊ฐ’์ด ์ œ๊ณต๋˜์ง€ ์•Š์•˜๋‹ค๋ฉด, ๊ธฐ๋ณธ๊ฐ’์ธ 'blue'๋กœ ์„ค์ •๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

  render() {
    return <CustomButton /> ; // props.color๋Š”  blue๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค
  }

props.color์— null ๊ฐ’์ด ์ œ๊ณต๋œ๋‹ค๋ฉด, ํ•ด๋‹น ๊ฐ’์€ null๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.

  render() {
    return <CustomButton color={null} /> ; // props.color๋Š” null์œผ๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค
  }

displayName

displayName ๋ฌธ์ž์—ด์€ ๋””๋ฒ„๊น… ๋ฉ”์‹œ์ง€ ํ‘œ์‹œ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ์ด ๊ฐ’์„ ์„ค์ •ํ•˜์ง€ ์•Š์•„๋„ ๋˜๋Š”๋ฐ, ์™œ๋ƒํ•˜๋ฉด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ •์˜ํ•˜๋Š” ํ•จ์ˆ˜ ๋˜๋Š” class์˜ ์ด๋ฆ„์œผ๋กœ๋ถ€ํ„ฐ ์ถ”๋ก ๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋””๋ฒ„๊น…์„ ์œ„ํ•˜์—ฌ ๋‹ค๋ฅธ ์ด๋ฆ„์„ ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜ ๊ณ ์ฐจ ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ์„ ์œ„ํ•˜์—ฌ ๋ช…์‹œ์ ์œผ๋กœ ์ด ๊ฐ’์„ ์„ค์ •ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, ์‰ฌ์šด ๋””๋ฒ„๊น…์„ ์œ„ํ•œ Display Name ๋ž˜ํ•‘ํ•˜๊ธฐ๋ฅผ ํ†ตํ•˜์—ฌ ์ž์„ธํ•œ ์ •๋ณด๋ฅผ ํ™•์ธํ•˜์„ธ์š”.


์ธ์Šคํ„ด์Šค ํ”„๋กœํผํ‹ฐ

props

this.props๋Š” ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ˜ธ์ถœ๋œ ๊ณณ์—์„œ ์ •์˜ํ•œ props๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. props์— ๋Œ€ํ•˜์—ฌ ๋” ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด ์ปดํฌ๋„ŒํŠธ์™€ props ๋ฌธ์„œ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.

ํŠนํžˆ this.props.children์€ ํŠน๋ณ„ํ•œ prop์œผ๋กœ, ์ผ๋ฐ˜์ ์ธ ํƒœ๊ทธ๊ฐ€ ์•„๋‹Œ JSX ํ‘œํ˜„์œผ๋กœ ์ž‘์„ฑ๋œ ์ž์‹ ํƒœ๊ทธ๋กœ ์ •์˜๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค.

state

state๋Š” ์–ด๋–ค ์ปดํฌ๋„ŒํŠธ์—๋งŒ ํ•œ์ •ํ•˜์—ฌ ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ํฌํ•จํ•˜๋ฉฐ, ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋Š” ์‹œ๊ฐ„์ด ์ง€๋‚จ์— ๋”ฐ๋ผ ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. state๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ž์œ ๋กญ๊ฒŒ ์ •์˜ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ผ๋ฐ˜์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ๊ฐ’์ด ๋ Œ๋”๋ง ๋˜๋Š” ๋ฐ์ดํ„ฐ ํ๋ฆ„ ์ƒ์—์„œ (์˜ˆ๋ฅผ ๋“ค์–ด, ํƒ€์ด๋จธ์˜ ID) ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, ํ•ด๋‹น ๊ฐ’์„ state์— ๋„ฃ์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌํ•œ ๊ฐ’์€ ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค์˜ ํ•„๋“œ๋กœ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž์„ธํ•œ ์ •๋ณด๋Š” State์™€ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฌธ์„œ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

this.state๋ฅผ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์ดํ›„ ํ˜ธ์ถœ๋˜๋Š” setState()๊ฐ€ ์ด์ „์— ์ ์šฉ๋œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๋ฎ์–ด์“ฐ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. this.state๋ฅผ ๋ถˆ๋ณ€์ (Immutable)์ธ ๋ฐ์ดํ„ฐ๋กœ ์ทจ๊ธ‰ํ•˜์„ธ์š”.

Is this page useful?Edit this page