우당탕탕 아장아장

9주차 월요일 15. 네트워크 통신 동기와 비동기 - 동기 방식(synchronous) : 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있는 방식 - 비동기 방식(Asynchronous) : 요청을 보낸 후 응답을 받기 전에 다음 작업을 먼저 실행하는 방식 ex) fetch함수, useState import React from "react"; const Async = () => { console.log("1. 안녕하세요"); setTimeout(() => console.log("2. 반가워요"), 3000); console.log("3. 안녕히계세요"); return ; }; export default Async; async와 await - async : 함수 선언부에 async 키워드 작성 -..

8주차 목요일 14. 리액트 라우터 싱글 페이지 어플리케이션 - 페이지 전환 속도가 빠름 - 주소가 변경되어도 서버에 추가로 웹 문서를 요청하는 작업 필요❌ 단점) - 어플리케이션 규모가 커지면 자바스크립트 파일 또한 커짐 - 페이지 로딩 시, 사용자가 실제로 방문하지 않을 수도 있는 페이지 스크립트까지 불러옴 라우팅이란? - 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 import React from "react"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: Home, errorEleme..

8주차 수요일 13. Context Context - 어플리케이션에서 전반적으로 사용할 값을 관리 - 예) 사용자의 언어, 로그인 상태, UI 테마 등 환경 설정 ➡ App.js function App() { return ; } function GrandParent({ value }) { return ; } function Parent({ value }) { return ; } function Child({ value }) { return ; } function Message({ value }) { return 전달받은 데이터 : {value}; } export default App; 길어 길어🤦‍♂️ 한번에 보내줄 수는 없지만, 새로운 영역을 생성해서 전달 가능! Context 사용 방법 1️⃣ Con..