Aeye Aeye

object binding import { createContext, useContext, useEffect, useRef } from "react"; import { io } from "socket.io-client"; export const SocketContext = createContext(); export const App = () => { console.log("App start"); const socket = useRef(null); socket.current = io("http://127.0.0.1:3001"); useEffect(() => { console.log("App:: useEffect execute"); }, []); return ( {console.log("App's r..

1단계 출력 순서가 어떻게 될지 유추해봐라. (useEffect, useState, rendering) import { useEffect, useState } from "react"; export const App = () => { useEffect(() => { console.log("App:: useEffect execute"); }); const [name, setName] = useState(() => { console.log("App:: name useState execute"); return ""; }); return {console.log(`name : ${name} rendering`)}; }; ==정답== ![[Pasted image 20231019003529.png]] 2단계 출력 순서..

axios axios를 이용해서 API서버로 Request를 보내려고 한다. component에서 필요하면 즉흥적으로 axios를 작성해서 사용해도 되지만 axios 인스턴스를 사용될 때 마다 생성해야하며 API요청을 한눈에 알아보기 힘들다.api/api axios.create를 이용하여 REST API 서버 URL을 기입한 후 export를 이용해서 다른 곳에서 재사용이 가능하도록 해준다.api/apis axios 인스터스를 import하여 get, post... 메서드를 호출한다. 이 때 직접 export 메서드를 만들어서 axios인스턴스를 호출하는데 어떤 행위를 하는지를 정확하게 메서드 이름을 정의해준다. async 메서드로 정의해주면 Promise object가 리런되는데 이것을 그대로 리턴한다..