React: getDerivedStateFromProps๋Š” setState # 13015 ์ดํ›„์— ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.

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

์ด์ƒ์ ์œผ๋กœ๋Š” ํ˜„์žฌ ๊ตฌ์„ฑ ์š”์†Œ์˜ setState๋กœ ์ธํ•ด getDerivedStateFromProps๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์•ˆ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๊ฒƒ์€ ๊ทธ๋ ‡๊ฒŒ ํ–‰๋™ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ˆ„๊ตฐ๊ฐ€ ์„ค๋ช… ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

# 13015 ์—์„œ ์†”๋ฃจ์…˜์„ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

Question

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

setState ๋Š” re-render ์˜ ๊ตฌ์„ฑ ์š”์†Œ๋กœ ์ด์–ด์ง‘๋‹ˆ๋‹ค. render ๊ตฌ์„ฑ ์š”์†Œ๋งˆ๋‹ค getDerivedStateFromProps ๋ฅผ ํ˜ธ์ถœํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด getDerivedStateFromProps ์ž‘๋™ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

๊ณ ๋ คํ•ด์•ผ ํ•  ๊ฒƒ์€ ๋ณ‘ํ•ฉ์„ ์œ„ํ•ด ๋ถ€๋ถ„ ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

์˜ˆ์ œ ์ฝ”๋“œ ์—†์ด๋Š” ๋‹น์‹ ์ด ๋งํ•˜๊ฑฐ๋‚˜ ๋ฌป๋Š” ๊ฒƒ์„ ์ดํ•ดํ•˜์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

getDerivedStateFromProps ์˜ํ•ด ๋ฐ˜ํ™˜ ๋œ ์ƒํƒœ๋Š” ํ˜„์žฌ props ๋ฐ ์ด์ „ state ๋ชจ๋‘๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœํ•˜๋ฏ€๋กœ getDerivedStateFromProps ๋Š” setState ์ดํ›„์— ํ˜ธ์ถœ ๋  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋ฉ๋‹ˆ๋‹ค state ๋”ฐ๋ผ์„œ ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋œ ๊ฒฝ์šฐ ( setState ํ˜ธ์ถœ์— ์˜ํ•ด) ํŒŒ์ƒ ๋œ ์ƒํƒœ ๋„ ๋ณ€๊ฒฝ๋˜์—ˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค ( props ๋ฐ state ์˜ ์กฐํ•ฉ์ด๊ธฐ ๋•Œ๋ฌธ์—). .

props ๊ฐ€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ ์ด์ „์— ๋‹ค์‹œ ํ˜ธ์ถœํ•˜์ง€ ์•Š์•˜์ง€๋งŒ์ด ๋™์ž‘์œผ๋กœ ์ธํ•ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๊ธฐ ๋•Œ๋ฌธ์—์ด ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์—์„œ ์–ธ๊ธ‰ ํ•œ๋Œ€๋กœ 16.4์—์„œ ๋ณ€๊ฒฝ (์ˆ˜์ •)ํ–ˆ์Šต๋‹ˆ๋‹ค.
https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix -for-getderivedstatefromprops

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

setState ๋Š” re-render ์˜ ๊ตฌ์„ฑ ์š”์†Œ๋กœ ์ด์–ด์ง‘๋‹ˆ๋‹ค. render ๊ตฌ์„ฑ ์š”์†Œ๋งˆ๋‹ค getDerivedStateFromProps ๋ฅผ ํ˜ธ์ถœํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด getDerivedStateFromProps ์ž‘๋™ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

๊ณ ๋ คํ•ด์•ผ ํ•  ๊ฒƒ์€ ๋ณ‘ํ•ฉ์„ ์œ„ํ•ด ๋ถ€๋ถ„ ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

๊ฐ์‚ฌ

@bvaughn , ๋‹ต๋ณ€ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

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