Ant-design: Form setFieldsValue ๋ฉ”์„œ๋“œ์˜ ๋งค๊ฐœ ๋ณ€์ˆ˜๋Š” ๋ฌด์—‡์ด๋ฉฐ ๊ฐœ์ฒด๋ฅผ ์ „๋‹ฌํ•˜๋ฉด componentWillReceiveProps์—์„œ ์‹คํ–‰์ด ์ถฉ๋Œํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 09์›” 09์ผ  ยท  16์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ant-design/ant-design

  • ๊ฐœ๋ฏธ ๋ฒ„์ „: 1.11.0
  • ์šด์˜ ์ฒด์ œ ๋ฐ ๋ฒ„์ „: MAC 10.11.6 ๋ฉ”๋ชจ๋ฆฌ 16G CPU i7
  • ๋ธŒ๋ผ์šฐ์ € ๋ฐ ํ•ด๋‹น ๋ฒ„์ „: CHROME

ํŽธ์ง‘ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜์—ฌ ๊ธฐ์กด ๋ฐ์ดํ„ฐ๋กœ ์–‘์‹์„ ์ฑ„์›๋‹ˆ๋‹ค.

๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์—…๋ฐ์ดํŠธ ์ƒํƒœ๊ฐ€ ํŽธ์ง‘ ์ƒํƒœ์ด๊ณ ,
componentWillReceiveProps์—์„œ setFieldsValue ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์‹ญ์‹œ์˜ค. ์•ฝ 1๋ถ„ ์ •๋„ ํ›„์— ์–‘์‹์ด ์ฑ„์›Œ์ง‘๋‹ˆ๋‹ค.
๊ทธ๋Ÿฐ ๋‹ค์Œ ์ž…๋ ฅ์„ ํด๋ฆญํ•˜๊ณ  ์•ฝ 1๋ถ„ ๋™์•ˆ ๊ณ„์† ๊ธฐ๋‹ค๋ฆฝ๋‹ˆ๋‹ค.

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

์ด ํ˜•ํƒœ๋Š” ์ •๋ง ์‚ฌ์šฉํ•˜๊ธฐ ์–ด๋ ต๊ณ , ํฌ์žฅ ํ›„ ์‚ฌ์šฉํ•˜๋Š” ๋น„์šฉ์ด ๋„ˆ๋ฌด ๋น„์Œ‰๋‹ˆ๋‹ค.

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

setFieldsValue ์˜ ๋ณธ์งˆ์€ ์™ธ๋ถ€ ๋ž˜ํผ์˜ setState ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๊ฐ„์ ‘์ ์œผ๋กœ componentWillReceiveProps ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์ด๋ฏ€๋กœ ๋ฌดํ•œ ๋ฃจํ”„์ž…๋‹ˆ๋‹ค.

mapPropsToFields http://ant.design/components/form/#Form.create (์˜ต์…˜)๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

@benjycui ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

mapPropsToFields๋Š” props๋ฅผ ํ•ด๋‹น ๊ฐ’์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ Redux ์ €์žฅ์†Œ์—์„œ ๊ฐ’์„ ์ฝ๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ธฐ๋Šฅ(์†Œํ’ˆ): Object{ fieldName: Object{ ๊ฐ’ } }
mapPropsToFields์— ์–ด๋–ป๊ฒŒ ์“ฐ๊ณ  ์‹ถ์€์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, ์ด ๋ณ€ํ™˜์„ ๋ฒˆ์—ญํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

@bnlambert ์งˆ๋ฌธ์ด ๋ฌด์—‡์ธ๊ฐ€์š”?

setFieldsValue ์ดˆ๊ธฐ๊ฐ’์„ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ ๋‚ด datepicker ์บ˜๋ฆฐ๋”๊ฐ€ ์ค‘๊ตญ์–ด๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์–ด๋–ป๊ฒŒ ์ˆ˜์ •ํ•ฉ๋‹ˆ๊นŒ?

moment.locale('en'); ์„(๋ฅผ) ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

https://ant.design/components/date-picker/ ๋ฌธ์„œ

'antd'์˜ ์ˆœ๊ฐ„์ด ํ•„์š”ํ•œ๊ฐ€์š”, ์•„๋‹ˆ๋ฉด ๋ณ„๋„๋กœ ๋‹ค์šด๋กœ๋“œํ•ด์•ผ ํ•˜๋‚˜์š”?.
์กฐ๊ธˆ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ๋ง์”€ํ•ด ์ฃผ์‹ญ์‹œ์˜ค. ๊ฐ์‚ฌ ํ•ด์š”

๊ท€ํ•˜์˜ ์›น์‚ฌ์ดํŠธ์—๋Š” 'setFieldsValue'์— ๋Œ€ํ•œ ๋ฉ”๋ชจ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

please don't use it in componentWillReceiveProps, otherwise, it will cause an endless loop, more)

์„ค๋ช…์„ ๊ฐ€์ •ํ•˜๋Š” ์ด ํŽ˜์ด์ง€๋กœ ์—ฐ๊ฒฐ๋ฉ๋‹ˆ๋‹ค. ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด ์–ด๋–ค ์ข…๋ฅ˜์˜ ๋ฒˆ์—ญ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ณ ๋งˆ์›Œ

@coljung Google ๋ฒˆ์—ญ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”.

@bnlambert @coljung ๋˜๋Š” ํฌ๋กฌ์ด๋ผ๋ฉด ์šฐํด๋ฆญ -> ์˜์–ด๋กœ ๋ฒˆ์—ญ

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

@benjycui IMO "Google ๋ฒˆ์—ญ๊ธฐ ์‚ฌ์šฉ"์€ ๊ฑด์„ค์ ์ธ ์˜๊ฒฌ์ด ์•„๋‹ˆ๋ฉฐ CODE_OF_CONDUCT.md ์— ์–ธ๊ธ‰๋œ ์ผ๋ถ€ ํ–‰๋™ ๊ทœ์น™์„ ์œ„๋ฐ˜ํ•ฉ๋‹ˆ๋‹ค.

  • ํ™˜์˜ํ•˜๊ณ  ํฌ์šฉ์ ์ธ ์–ธ์–ด ์‚ฌ์šฉ
  • ๋‹ค์–‘ํ•œ ๊ด€์ ๊ณผ ๊ฒฝํ—˜์„ ์กด์ค‘ํ•˜๊ธฐ
  • ๊ฑด์„ค์ ์ธ ๋น„ํŒ์„ ์šฐ์•„ํ•˜๊ฒŒ ์ˆ˜์šฉ
  • ์ง€์—ญ์‚ฌํšŒ๋ฅผ ์œ„ํ•œ ์ตœ์„ ์˜ ๊ฒƒ์— ์ง‘์ค‘
  • ๋‹ค๋ฅธ ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ตฌ์„ฑ์›์— ๋Œ€ํ•œ ๊ณต๊ฐ ํ‘œ์‹œ

":smile:"์ด๋ผ๊ณ  ๋ฐ˜์‘ํ•œ 9๋ช…์—๊ฒŒ: ๋‹น์‹ ์€ ๋ถ„๋ช…ํžˆ ์ด์ค‘ ์–ธ์–ด๋ฅผ ๊ตฌ์‚ฌํ•ฉ๋‹ˆ๋‹ค. Google ๋ฒˆ์—ญ ์ฝ˜ํ…์ธ ์— ์–ผ๋งˆ๋‚˜ ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ์„์ง€, ๋‹น์‹ ์˜ ์–ธ์–ด ๋Šฅ๋ ฅ ๋•๋ถ„์— ํ•„์š”ํ•œ ๊ฒฝ์šฐ ๋ฒˆ์—ญ์„ ์กฐ์ •ํ•˜๊ณ  ๋Œ€์‹  ์—ฌ๊ธฐ์— ์ฝ˜ํ…์ธ ๋ฅผ ๋ถ™์—ฌ๋„ฃ์œผ์…จ์Šต๋‹ˆ๊นŒ?

๊ทธ ๋ง :

  1. OP๋Š” ๋ฌธ์ œ๋ฅผ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค. componentWillReceivedProps setFieldsValue ๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ๋ฃจํ”„๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ ๊ฒฐ๊ตญ 1๋ถ„ ํ›„์— ์ค‘์ง€๋ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ํ•„๋“œ๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ์ƒˆ๋กœ์šด "๋ฌดํ•œ" ๋ฃจํ”„๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
  2. ๋ฉ”์ธํ…Œ์ด๋„ˆ๋Š” setFieldsValue ๊ฐ€ HOC์—์„œ this.setState ๋กœ ์—ฐ๊ฒฐ๋˜๋ฏ€๋กœ props๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  componentWillReceiveProps ๋ฉ”์†Œ๋“œ๊ฐ€ ์ง์ ‘ ํ˜ธ์ถœ๋˜๋„๋ก ํ•œ๋‹ค๊ณ  ๋Œ€๋‹ตํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ฃจํ”„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. mapPropsToFields ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  3. OP๋Š” ๊ด€๋ฆฌ์ž์—๊ฒŒ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
  4. ๋‹ค๋ฅธ(๋‹ต์ด ์—†๋Š”) ์งˆ๋ฌธ์ด ๋‚˜์˜ต๋‹ˆ๋‹ค. mapPropsToFields ๋Š” ์Šคํ† ์–ด์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฝ๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์–ด๋–ป๊ฒŒ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด ํ˜•ํƒœ๋Š” ์ •๋ง ์‚ฌ์šฉํ•˜๊ธฐ ์–ด๋ ต๊ณ , ํฌ์žฅ ํ›„ ์‚ฌ์šฉํ•˜๋Š” ๋น„์šฉ์ด ๋„ˆ๋ฌด ๋น„์Œ‰๋‹ˆ๋‹ค.

mapPropsToFields ๋ฐ ์—…๋กœ๋“œ ์ถฉ๋Œ ์—…๋กœ๋“œ๋Š” ์–‘์‹์„ ์žฌ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

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