React-dnd: ๋“œ๋ž˜๊ทธ ๊ฐ€๋Šฅํ•œ ๊ตฌ์„ฑ ์š”์†Œ (Firefox) ๋‚ด๋ถ€์˜ ํ…์ŠคํŠธ ์ž…๋ ฅ ๋ฌธ์ œ

์— ๋งŒ๋“  2015๋…„ 08์›” 07์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: react-dnd/react-dnd

Firefox์—์„œ HTML5 ์†์„ฑ draggable ๊ฐ€ true ๋กœ ์„ค์ •๋œ ๊ตฌ์„ฑ ์š”์†Œ ๋‚ด๋ถ€์˜ ํ…์ŠคํŠธ ์ž…๋ ฅ์— ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค ( ์ด ์•Œ๋ ค์ง„ ๋ฒ„๊ทธ๋กœ ์ธํ•ด). onFocus ์ฒ˜๋ฆฌ๊ธฐ์—์„œ draggable ์„ false ๋กœ ์„ค์ •ํ•˜๊ณ  onBlur ์ฒ˜๋ฆฌ๊ธฐ์—์„œ true ๋กœ ๋‹ค์‹œ ์„ค์ •ํ•˜๋Š” ์ค‘์ž…๋‹ˆ๋‹ค ( as ์—ฌ๊ธฐ์„œ ๊ถŒ์žฅ ๋จ ), ๊ทธ๋Ÿฌ๋‚˜ react-dnd๋Š” ์ด๋Ÿฌํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ง€์›ํ•˜์ง€ ์•Š์œผ๋ฉฐ ์†์„ฑ์€ ์ฆ‰์‹œ true ๋‹ค์‹œ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.

FireFox์—์„œ์ด ๋ฒ„๊ทธ์— ๋Œ€ํ•œ ์ง„ํ–‰์ด ์ง„ํ–‰๋˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ ์„ ๊ฐ์•ˆํ•  ๋•Œ react-dnd์˜ shim์ด์ด๋ฅผ ์ฒ˜๋ฆฌ ํ•  ์—ฌ์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ์ƒ๊ด€์—†์ด ์ข‹์€ ํ•ด๊ฒฐ์ฑ…์ด ๋‚˜์˜ค๋ฉด์ด ๋ฌธ์ œ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

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

onFocus ๋ฐ onBlur ์˜ ์ƒํƒœ ๋ณ€์ˆ˜๋ฅผ ํ† ๊ธ€ํ•˜๊ณ  render ํ•จ์ˆ˜๋ฅผ _not_ call connectDragSource() ๋ณ€๊ฒฝํ•˜์—ฌ์ด ๋ฒ„๊ทธ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค onBlur :

render() {
  const element = <div><textarea onFocus=... /></div>;
  return this.state.editing ? element : this.props.connectDragSource(element);
}

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

๊ทผ๋ณธ์€ # 256 ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ง€๊ธˆ์€ ๋‚ด ์•ฑ์—์„œ ์ง์ ‘ draggable ์†์„ฑ์„ ๊ด€๋ฆฌ ํ•  ์ˆ˜ ์žˆ๋Š” ํฌํฌ๋กœ ์ž‘์—…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ์‚ฌ. ๋‚˜๋Š” ํ˜„์žฌ ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๋กœ ๋ฐ”์˜๋‹ค.
์ด PR ์ค‘ ํ•˜๋‚˜๋ผ๋„ ๋„์›€์ด๋œ๋‹ค๋ฉด ์ €๋„ ์•Œ๋ ค์ฃผ์„ธ์š” : https://github.com/gaearon/react-dnd/pulls

HTML5 ๋ฐฑ์—”๋“œ๋Š” ํŽธ์˜์ƒ ํฌํ•จ๋˜์–ด ์žˆ์Œ์„ ์žŠ์ง€ ๋งˆ์‹ญ์‹œ์˜ค.
NPM (๋‹จ์ผ ํŒŒ์ผ)์— ๊ณ ์ • ๋ฒ„์ „์„ ๊ฒŒ์‹œ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๋‹ค๋ฅธ ๋ชจ๋“  ์ž‘์—…์—๋Š” ์—ฌ์ „ํžˆ ๊ธฐ๋ณธ ์ €์žฅ์†Œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

onFocus ๋ฐ onBlur ์˜ ์ƒํƒœ ๋ณ€์ˆ˜๋ฅผ ํ† ๊ธ€ํ•˜๊ณ  render ํ•จ์ˆ˜๋ฅผ _not_ call connectDragSource() ๋ณ€๊ฒฝํ•˜์—ฌ์ด ๋ฒ„๊ทธ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค onBlur :

render() {
  const element = <div><textarea onFocus=... /></div>;
  return this.state.editing ? element : this.props.connectDragSource(element);
}
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰