Axios란? 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지. Axios 설치 yarn add axios Json-Server Axios 를 사용하기전에 Axios 로 통신할 서버가 필요하다. 그 역활을 Json-Server로 대체 json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지이다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함이다. json-server를 통해서 F..

react-router-dom이란? 페이지를 구현할 수 있게 해주는 패키지이다. 패키지 설치 yarn add react-router-dom 구조 및 사용법 1. src 폴더에 pages 라는 폴더를 만들고 그 안 가상의 여러 페이지 생성 2. src/shared/Router.js 생성 import React from "react"; // 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다. import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import About from "../pages/About"; import Contact from "...

useEffect란? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook, 즉 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용한다. 코드로 보기 렌더링될 때 useEffect 안에 있는 console.log가 실행된다. 이게 useEffect 핵심 기능 import React, { useEffect } from "react"; const App = () => { useEffect(() => { console.log("hello useEffect"); }); return Home; } export default App; useEffect와 리렌..