React (56) 썸네일형 리스트형 리액트 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}`).the.. 리액트 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: i.. 리액트 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; setValue.. 리액트 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)=>{ r.. #2.0 Introduction 리액트는 웹사이트에 상호작용을 하기 위해서 만들어짐 버튼을 클릭함에 따라 화면에 텍스트가 변하게 하려면 바닐라js : html->id->get id->event listener->function 리액트js : 버튼생성, 클릭감지를 하려면 무엇이 필요한지 앎, 빠른 아이디어들을 모아둔 것 리액트 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.jsimport Item from "./Item";export default function items() { var item={status:"todo", task:"커피마시기", due:"20220330"}; //todo=해야되는 일이라서 체크표시 r.. 이전 1 2 3 4 5 6 7 다음
