νμ¬ κ΅¬μ± μμ(μ΄ κ²½μ° <ListGroupItem>
from React Bootstrap )λ₯Ό λλκ·Έ μμ€λ‘ μ¬μ©νκ³ μΆμ΅λλ€. connectReactSource
λ₯Ό νΈμΆνλ©΄ μ€λ₯κ° λ°μν©λλ€.
μ΄μ κΈ°λ³Έ μμ λ Έλλ§ connectDragSource()μ μ λ¬ν μ μμ΅λλ€. ListGroupItemμ
, λλ λλκ·Έ μμ€ λλ λλ‘ λμ μμ²΄λ‘ μ νν©λλ€.κ·Έλ¬λ
<div>
λννλ©΄<li>
μ΄μ΄μΌ νκΈ° λλ¬Έμ λ§ν¬μ κ³Ό μ€νμΌμ΄ μλ§μ΄ λ©λλ€. λ€λ₯Έ μ΅μ μ λλκ·Έ μμ€λ‘ λ°κΎΈλ κ²μ΄μ§λ§ νμ¬ κ΅¬μ± μμμ μμ€λ₯Ό νΈμ§νμ§ μκ³ λ λ°©λ²μ λͺ¨λ₯΄κ² μ΅λλ€. μ¬κΈ°μ μ³μ μΌμ 무μμ λκΉ?
μ’μ μ§λ¬Έ. λλ λΉμ μ΄ μ΄κ²μ ν μ μμ΄μΌνλ€κ³ μκ°ν©λλ€ :
import { findDOMNode } from 'react-dom';
class DraggableListGroupItem extends Component {
render() {
const { connectDragSource, ...rest } = this.props;
return (
<ListGroupItem
{...rest}
ref={instance => connectDragSource(findDOMNode(instance))}
/>
);
}
}
export default DragSource(...)(DraggableListGroupItem);
μ΄κ²μ connect*()
ν¨μκ° μ λ¬ν λ΄μ©μ 보기 λλ¬Έμ μλν©λλ€. μ μΈμ μΌλ‘(DOM React μμλ₯Ό μ λ¬νκ³ λ°νμΌλ‘ DOM React μμλ₯Ό κ°μ Έμ΄) λλ λͺ
λ Ήμ μΌλ‘(DOM λ
Έλλ‘ νΈμΆνκ³ λμ€μ null
λ‘ νΈμΆνλ κ²μ μμ§ λ§μμμ€) refs μμ
μ²λΌ ).
(μ΄λ λν λ€λ₯Έ DOM μμλ₯Ό λλκ·Έ μμ€λ‘ μ¬μ©ν μ μλ μμ λ₯Ό μ€λλ€. μλ₯Ό λ€μ΄ findDOMNode()
μμ κ°μ Έμ¨ λ
Έλλ₯Ό 쿼리ν μ μμ΅λλ€. λ΄λΆμ μμ‘΄νλ κ²μ μ’μ§ μμΌλ―λ‘ μ΅νμ μλ¨μΌλ‘ μ¬μ©ν΄μΌ ν©λλ€. νμ¬ κ΅¬μ± μμμ DOM ꡬ쑰)
μ΄κ²μ λλ₯Ό μν΄ μλνμ§ μμμ΅λλ€. μ΄μ μ€μ²©μ΄ μ¬λ°λ₯΄μ§λ§ μμλ₯Ό λ μ μμΌλ©° μ½μμ λ€μ μ€λ₯κ° νμλ©λλ€.
Unhandled promise rejection TypeError: (0 , _reactDom2.default) is not a function(β¦)
λλ λΉμ μ΄ μ λ ₯νλ€κ³ λ―Ώμ΅λλ€
import findDOMNode from 'react-dom';
보λ€λ
import { findDOMNode } from 'react-dom';
μ€μ λ‘ react-dom
μλ κΈ°λ³Έ λ΄λ³΄λ΄κΈ°κ° μμΌλ―λ‘ findDOMNode
λΌλ νΉμ λ΄λ³΄λ΄κΈ°λ₯Ό μ¬μ©νμ΅λλ€. κΈ°λ³Έ λ΄λ³΄λ΄κΈ°μ λͺ
λͺ
λ λ΄λ³΄λ΄κΈ°μ μ°¨μ΄μ μ λν μΆκ° μ 보: http://exploringjs.com/es6/ch_modules.html
μΆμλ μμ λ₯Ό μμ±νλ €κ³ νλ λμ€μ λ²κ·Έλ₯Ό λ¨Όμ μ‘μμ΅λλ€!
κΈ°λ³Έ λ΄λ³΄λ΄κΈ°μ λͺ λͺ λ λ΄λ³΄λ΄κΈ°μ μ°¨μ΄μ μ λν΄ μκ³ μμ§λ§ μ΄λ€ κ²μ΄ νμνμ§ νμ μμ§ λͺ»νκ³ λλ²κ·Έ λκ΅¬κ° λ¬΄μ¨ μΌμ΄ μΌμ΄λκ³ μλμ§ λ³΄μ¬μ£Όλ μ€λ₯ λ©μμ§λ₯Ό μ 곡νλ λ° μ’μ§ μμ΅λλ€. μ΄μ Webpackμ μν΄ λ¬Έμ κ° μμ λμμμλ λΆκ΅¬νκ³ ν΄λΉ μ€λ₯ λ©μμ§κ° λ¬Έμ λ₯Ό κ°λ¦¬ν€λ λ°©λ²μ μ μ μμ΅λλ€. κ°μ κ°μ¬ν©λλ€!
μΆμ : μ΄κ²μ λ¬Έμμ μΆκ°νκΈ° μν΄ ν 리νμ€νΈλ₯Ό μ μΆνλ€λ©΄(μκ°μ΄ μμμ§ λͺ¨λ₯΄κ² μ§λ§) μ΄λμ λ£λμ? connectDragSource μ€λ₯κ° μ΄ μ루μ μ κ°λ¦¬ν€λ κ²½μ° λμμ΄ λ κ²μ λλ€.
νμ€νμ§ μμ΅λλ€. νμ¬ λ©μμ§κ° μΆ©λΆνλ€κ³ μκ°ν©λλ€. μ΄μ μΈν°λ· κ²μμλ μ΄ λ¬Έμ κ° μμ΅λλ€ :-)
그건 κ·Έλ κ³ λλ κ·νμ μ§λ¬Έμ λ€μ μ½κ³ <div>
ꡬ체μ μΌλ‘ λ©νν νμκ° μλ€λ μ μ κ°μ‘°νκ³ μΆμ΅λλ€. μ€λ₯ λ©μμ§μ μμ μ connectDragSource()
κ° <div>
, <li>
λλ κΈ°ν λͺ¨λ DOM μμλ₯Ό λνν΄μΌ νλ€λ κ²μ
λλ€. μμ ν΄κ²° λ°©λ²μ μ¬μ©μ μ§μ κ΅¬μ± μμμλ§ νμν©λλ€.
μ΄μ μΈν°λ· κ²μμλ μ΄ λ¬Έμ κ° μμ΅λλ€ :-)
λ€νμ€λ½κ²λ! :μ΄λ₯Ό λλ¬λ΄κ³ μλ€:
κ·Έλ₯ λΉμ μ΄ μ²΄μΈμ μ¬μ©νλ κ²½μ°, μ½κ°μ μ λ°λλ₯Ό μΆκ°νλ €λ©΄ connect*()
λΉμ μ ν΅ν render()
λμ μ λΉμ μ΄ ν νμκ°,μ, κ°μ λ»μ μ μ κ·Όνμ§ μμ
μνμ:
ref={instance => {
const node = findDOMNode(instance);
connectDragSource(node);
connectDropTarget(node);
}}
μ΄μ λν 2κ°μ§ μ§λ¬Έ:
Q1. 3rd λΆν λΌμ΄λΈλ¬λ¦¬λ₯Ό λλκ·Έ λμμΌλ‘ μ¬μ©ν μλ μμ΅λλ€. μ¬μ© μ¬λ‘λ λ°μ μ€νΈλ© "컨ν
μ΄λ"λ₯Ό λμμΌλ‘ μ¬μ©νκ³ νμ΄μ§λ₯Ό λΉλνκΈ° μν΄ "ν" λλ κ·Έ μμ λ€λ₯Έ κ΅¬μ± μμλ₯Ό μμ νλ κ²μ
λλ€.
Q2. findDOMNodeκ° κΈ°λ₯ κ΅¬μ± μμμμ μλνμ§ μλ κ² κ°μ΅λλ€. μΌλΆ νμ¬ κ΅¬μ± μμκ° μλνλ κ²½μ° λμ΄μ λκΈ°λ₯Ό μννλ λ°©λ²μ 무μμ
λκΉ?
κ°μ₯ μ μ©ν λκΈ
λ€νμ€λ½κ²λ! :μ΄λ₯Ό λλ¬λ΄κ³ μλ€:
κ·Έλ₯ λΉμ μ΄ μ²΄μΈμ μ¬μ©νλ κ²½μ°, μ½κ°μ μ λ°λλ₯Ό μΆκ°νλ €λ©΄
connect*()
λΉμ μ ν΅νrender()
λμ μ λΉμ μ΄ ν νμκ°,μ, κ°μ λ»μ μ μ κ·Όνμ§ μμ μνμ: