신입개발자_장민기

npm install react-router-dom을 통해 라우터 설치 App import HomePage from "./pages/Home" import Products from "./pages/Products" import { createBrowserRouter, RouterProvider } from "react-router-dom" const router = createBrowserRouter( //여러 사이트를 연결하기 때문에 배열로 정렬 [ {path: "/", element: }, {path: "/products", element: } ] ); export default function App(){ //1. npm install react-router-dom return( App ) } Ho..

{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" }, "todos": [ { "id": 1, "title": "Read SitePoint article", "complete": false }, { "id": 2, "title": "Clean inbox", "complete": false }, { "id": 3, "title": "Make restaurant reservation", "complete": false } ] } npm run json-s..

npm install axios App import { useEffect, useState } from "react"; import { fetchUserList, insertUser } from "./http"; import UsersList from "./components/UsersList" import Error from "./components/Error"; import Box from "./components/Box"; /* 1. npm install axios 2. http.js 파일 수정 */ export default function App(){ const [usersList, setUsersList] = useState([]); const [isFetching, setIsFetching]..

App import { useEffect, useState } from "react"; import { fetchUserList, insertUser } from "./http"; //추가 import UsersList from "./components/UsersList" import Error from "./components/Error"; import Box from "./components/Box"; export default function App(){ const [usersList, setUsersList] = useState([]); const [isFetching, setIsFetching] = useState(false); const [error, setError] = useState();..

http.js(동일) export async function fetchUserList(){ //데이터 요청 응답 수신 const response = await fetch("https://reqres.in/api/users?page=2", { method: "GET" //정상요청 //method: "PUT" //에러 출력을 위한 put 사용 }); //비동기 요청: promise 객체 리턴 => await 처리 //await 사용함수는 전체를 async 처리해주어야 함 if(!response.ok){ console.log("fetchUserList.Error"); throw new Error("UsersList 요청 예외"); } const resData = await response.json(); ret..

http export async function fetchUserList(){ //데이터 요청 응답 수신 const response = await fetch("https://reqres.in/api/users?page=2", { //method: "GET" //정상요청 method: "PUT" //에러 출력을 위한 put 사용 }); //비동기 요청: promise 객체 리턴 => await 처리 //await 사용함수는 전체를 async 처리해주어야 함 if(!response.ok){ console.log("fetchUserList.Error"); throw new Error("UsersList 요청 예외"); } const resData = await response.json(); return res..

https export async function fetchUserList(){ //데이터 요청 응답 수신 const response = await fetch("https://reqres.in/api/users?page=2"); //비동기 요청: promise 객체 리턴 => await 처리 //await 사용함수는 전체를 async 처리해주어야 함 const resData = await response.json(); console.log(resData); return resData.data; } App import { useEffect, useState } from "react"; import { fetchUserList } from "./http"; import UsersList from "./com..

import React from "react" import { useState, useMemo } from "react" export default function App(){ const [count, setCount] = useState(0); const increase = () => { setCount(count + 1) } //항상 고정된 값을 리턴하는 함수 const calculateComplexValue = useMemo(() => { console.log("calculateComplexValue") return 2 * 2 * 987; }, []); /* useMemo 적용 안 된 예제 - increase 버튼을 클릭하면 count값이 증가하고 재랜더링됨 -> complexValue값을 다시 그..

App import React from "react" import { useState} from "react" import Counter from "./components/Counter" import Counter2 from "./components/Counter2" import Counter3 from "./components/Counter3" import Counter4 from "./components/Counter4" export default function App(){ const [num, setNum] = useState(0); function handleEvent(){ setNum(num + 1); } return( App {num} {/* Counter와 Counter2는 부모인 App이..

import React from "react" import { useState, useEffect } from "react" export default function App(){ const [num, setNum] = useState(0); useEffect(() => { console.log("effect") document.querySelector("#up").addEventListener("click", onIncrease); }, []); function onIncrease(){ setNum(num + 1); } return( App {num} + ) }