신입개발자_장민기

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} + ) }

App import React from "react" import { useState, useEffect } from "react" export default function App(){ //컴포넌트 함수 안에서 useState 선언 //1. [의존성배열]에 state값이 있는 경우: number값이 변경되면 부수효과함수가 재실행됨 //2. [] 빈배열을 지정한 경우, 단 한번만 실행 //3. 배열 지정 안 하면 App이 재랜더링될 때마다 부수효과함수가 재실행됨 //4. strict 모드로 실행하면 2번 호출( 1번 호출하려면 index.js 수정 ) const [number, setNumber] = useState(0); const [number2, setNumber2] = useState(0); us..

App import { createContext, useReducer, useState } from "react" import Button from "./components/Button" export const UserContext = createContext(null); export default function App(){ const reducer = (current_state, action) => { //current_state: 현재 배열 상태 //action: type(타입명: ADD / DEL) / xxx(추가되는 값) console.log(">>>" , current_state.filter((v,i) => v !== action.xxx)); switch(action.type){ case "A..

user-context import { createContext } from "react"; export const UserContext = createContext(""); App import { useState } from "react" import Profile from "./components/Profile" import {UserContext} from"./store/user-context" export default function App(){ const [username, setUsername] = useState("Mike"); return ( App {/* epxport const UserContex = createContext(""); */} ) } Greeting import { us..

import { useReducer, useState } from "react"; //1. useReducer와 useState 등록 export default function App() { const reducer = (current_state, action) => { //current_state: 현재 배열 상태 switch (action.type) { //action: { type: "타입명", item: 추가되는 값 } case "INCREMENT": //type명이 INCREMEMT인 경우 return [...current_state, action.item]; //기존 배열에 신규 값 추가 case "DECREMENT": //type명이 DECREMENT인 경우 //기존 배열에서 신규값과 같지 ..