미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
react-beatiful-dnd에서 문제가 발생합니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 기능상에 문제가 있는건 아니지만, 계속해서 아래의 에러가 발생합니다.사용하고 있는 버전의 문제일까요?{
"name": "react-todo-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/dom": "10.4.0",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "16.2.0",
"@testing-library/user-event": "13.5.0",
"react": "^19.0.0",
"react-beautiful-dnd": "13.1.1",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1",
"web-vitals": "2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "10.4.20",
"postcss": "8.5.3",
"tailwindcss": "3.4.17"
}
}
Lists.jsimport React from 'react';
import List from './List.js'
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
const Lists = React.memo(({todoData, setTodoData}) => {
// console.log('Lists Component')
const handleEnd = (result) => {
if(!result.destination) return;
const newTodoData = Array.from(todoData);
const [reorderedItem] = newTodoData.splice(result.source.index, 1);
newTodoData.splice(result.destination.index, 0, reorderedItem);
setTodoData(newTodoData);
}
return <div>
<DragDropContext onDragEnd={handleEnd}>
<Droppable droppableId='todo'>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
>
{(todoData ?? []).map((data, index) => (
<Draggable
key={data.id}
draggableId={data.id.toString()}
index={index}
>
{(provided, snapshot) => (
<List
key={data.id}
id={data.id}
title={data.title}
completed={data.completed}
provided={provided}
snapshot={snapshot}
todoData={todoData}
setTodoData={setTodoData} />
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>;
})
export default Lists; App.jsimport React, {useState} from 'react'
import "./App.css"
import Lists from './components/Lists'
import Form from './components/Form'
export default function App() {
// console.log('App Component')
const [todoData, setTodoData] = useState([
{
id: 1,
title: '운동하기',
completed: false,
},
{
id: 2,
title: '공부하기',
completed: false,
}
])
const [value, setValue] = useState("")
return (
<div className="flex items-center justify-center w-screen h-screen bg-blue-100" >
<div className='full p-6 m-4 bg-white rounded shadow md:w-3/4 md:max-w-lg lg:w-3/4 lg:max-w-lg'>
<div className="flex justify-between mb-3">
<h1>할 일 목록</h1>
</div>
<Lists todoData={todoData} setTodoData={setTodoData} />
<Form value={value} setValue={setValue} setTodoData={setTodoData}/>
</div>
</div>
)
}
