$$config title: REACT DB 데이터 조회 keywords: - REACT - MYSQL $$ # DB연결 - DB 연결 전 `npm i axios` 설치해야함
- 원래 값 들어있던 list 디비 연결해놓은 것도 실행해야함. 모르겠음 뭔 소린지 뭘 어떻게 하라는지 나도 모름. 처음부터 다시 배워도 이해 안 갈 거 같음 . 객체가 뭔지부터도 모르겠ㅇ음 썅 - App.js ```jsx import React, { useEffect, useRef, useState } from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; import TodoEdit from './components/TodoEdit'; import axios from 'axios'; function App () { const [todos, setTodos] = useState([]); const [insertToggle , setInsertToggle ] = useState(false); const [selectedTodo, setSelectedTodo ] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const nextId = useRef(4); const onInsert = (text) => { const todo = { id : nextId.current, text : text, checked : false, }; setTodos((todos) => todos.concat(todo)); nextId.current++; }; const onRemove = id => { setTodos(todos => todos.filter(todo => todo.id !== id)); } const onInsertToggle = () => { setInsertToggle((prev) => !prev); } const onToggle = (id) => { setTodos((todos) => todos.map((todo) => todo.id === id ? {...todo, checked: !todo.checked} : todo ) ); }; const onUpdate = (id, text) => { setTodos((todos) => todos.map((todo) => (todo.id === id ? {...todo, text } : todo)) ); onInsertToggle(); } useEffect(()=> { const getData = async () => { try { const data = await axios({ url:"http://localhost:4000/todos", method:"GET", }); console.log(data.data); setTodos(data.data); setIsLoading(false); } catch (e) { setError(e); } }; getData(); }, []); if (error) { return <>에러: {error.message}; } if (isLoading) { return <>Loading...; } return ( {insertToggle && } ); }; export default App; ```