TypeError: React.createContext๋ ๊ตฌ์ฑ ์์์ DragDropContext๋ฅผ ์ถ๊ฐํ๋ ค๊ณ ํ ๋ ํจ์๊ฐ ์๋๋๋ค. ์ ๋ React v15.6.1์ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ React v16์์ Context๊ฐ ๋์ ๋ ์ดํ react-dnd๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด React v16์ ์ฌ์ฉํด์ผ ํ๋์ง ๊ถ๊ธํฉ๋๋ค.
๋ค์์ DragDropContext๋ฅผ ์ถ๊ฐํ๋ ค๋ ๊ตฌ์ฑ ์์์ ๋๋ค.
import React, {Component} from 'react';
import FormSpace from './FormSpace';
import TextItem from './TextItem';
import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContext } from 'react-dnd';
class AdvancedFormRnd extends Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-sm-8">
<FormSpace/>
</div>
<div className="col-sm-4">
<TextItem/>
</div>
</div>
</div>
)
}
}
export default DragDropContext(HTML5Backend)(AdvancedFormRnd);
<TextItem/>
๋ Draggable๋ก ๋ง๋ค๊ณ ์ถ์ ์ปดํฌ๋ํธ์ด๊ณ <FormSpace/>
๋ Droppable ์ปดํฌ๋ํธ์
๋๋ค.
react-dnd์์ DragDropContext๋ฅผ ๊ฐ์ ธ์ค๊ธฐ๋ง ํ๋ฉด ์ด๋ฐ ์ผ์ด ๋ฐ์ํฉ๋๋ค.
๋ฐ์ ๋ฒ์ ์ 16์ผ๋ก ์ ๋ฐ์ดํธํ๊ฑฐ๋ react-dnd ๋ฒ์ ์ 3.0.2๋ก ๋ณ๊ฒฝํฉ๋๋ค.
dnd์ ์ต์ ๋ณ๊ฒฝ ์ฌํญ์ ๋ค์ ๋งํฌ๋ฅผ ์ฐธ์กฐํ์ญ์์ค: https://github.com/react-dnd/react-dnd/releases/tag/v4.0.0
@Mangaraju-Velpula ๊ฐ์ฌํฉ๋๋ค. ๋ณ๊ฒฝ ๋ก๊ทธ๋ฅผ ํ์ธํ๋ ๊ฒ์ ์์์ต๋๋ค. ์ด์ ๋ช ํํด์ก์ต๋๋ค. ๋ฒ์ 3.0.2์ ๋ํ ๋ณ๋์ ๋ฌธ์๊ฐ ์์ต๋๊น? ์๋๋ฉด ํ์ฌ ๋ฌธ์๊ฐ ๋ฒ์ 3.0.2์์ ๊ด์ฐฎ์ต๋๊น?
ํ์ฌ ๋ฌธ์๋ก ์ถฉ๋ถํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ฐ์ ๋ฒ์ ์ 16์ผ๋ก ์ ๋ฐ์ดํธํ๊ฑฐ๋ react-dnd ๋ฒ์ ์ 3.0.2๋ก ๋ณ๊ฒฝํฉ๋๋ค.
dnd์ ์ต์ ๋ณ๊ฒฝ ์ฌํญ์ ๋ค์ ๋งํฌ๋ฅผ ์ฐธ์กฐํ์ญ์์ค: https://github.com/react-dnd/react-dnd/releases/tag/v4.0.0