리액트 기초 (23) 썸네일형 리스트형 리액트 26강 useEffect(() => { ref.current.focus(); },[]) //배열을 넘겨주면 맨처음에 페이지가 렌더링 될 때만 포커스가 넘어감 ->형식에 맞춰서 입력받도록 수정필요 리액트 25강 페이지마다 URL을 지정 import { useState, useEffect } from "react"; import Item from "./Item"; export default function items( {endpoint=""} ) { //endpoint를 이용하여 버튼에 따라 페이지 변경 // eslint-disable-next-line react-hooks/rules-of-hooks const [data, setData] = useState([]); // eslint-disable-next-line react-hooks/rules-of-hooks useEffect(()=>{ fetch(`http://localhost:3001/items${endpoint}`).then((res)=>{ return.. 리액트 24강 데이터 삭제하는 기능 import {useState} from "react"; export default function Item({item:i}){ const [item, setItem] = useState(i); const toggle = () => { fetch(`http://localhost:3001/items/${item.id}`,{ method:"PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...item, status: item.status === "done"? "todo" : "done" //상태를 반대로 해주기 }) }).then((res)=>{ if(res.ok){ setItem({ ...it.. 리액트 23강 get메소드- 단순히 서버에서 데이터를 가지고 오는 것 포스트메소드- api서버에 새로운 게시물을 등록해주는 것, 보내주는 것 import { useRef, useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; export default function CreateItem() { const [values, setValues] = useState({ //화면에 글씨치면 나오게해주는애 task: "", due: "" }); const handleChange = (event) => { const { name, value } = event.target; setValues({ ...values, [name]: valu.. 리액트 22강 백엔드 API를 리액트 앱과 연결 import { useState, useEffect } from "react"; import Item from "./Item"; //데이터를 react와 연결하기 위해 import export default function items() { // eslint-disable-next-line react-hooks/rules-of-hooks const [data, setData] = useState([]); // eslint-disable-next-line react-hooks/rules-of-hooks useEffect(()=>{ fetch("http://localhost:3001/items").then((res)=>{ return res.json() //response는.. 리액트 21강 데이터 보는 방법 모든 item 보기 http://localhost:3001/items 이 경로는 기본적으로 새로운 item을 추가하거나 삭제할 때 사용 id에 따른 item 보기 http://localhost:3001/items/3...4..5(id 값) 상태에 따른 item 보기 http://localhost:3001/items?status=done(todo) 리액트 20강 할일 목록 화면에 표시 import {useState} from "react"; export default function Item({item:i}){ const [item, setItem] = useState(i); return( {item.task} {item.due} ); } item.js import Item from "./Item"; export default function items() { var item={status:"todo", task:"커피마시기", due:"20220330"}; //todo=해야되는 일이라서 체크표시 return ( Task Due ); } items.js 리액트 19강 메인페이지 만들기 import React from "react"; import Items from "./components/Items"; import Header from "./components/Header"; import CreateItem from "./components/Createitem"; import { BrowserRouter, Routes, Route } from "react-router-dom"; function App() { return ( ); } export default App; App.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from .. 이전 1 2 3 다음
