개발자일지

리액트 라우터 v6에서는 Route 컴포넌트의 사용 방식이 v5와 달라졌다. element 속성을 사용하여 JSX를 전달하고, Route 컴포넌트에 닫는 태그 없이 바로 JSX를 넣는 방식으로 변경되었다. 또한, "404 페이지"와 같은 fallback 경로를 처리할 때는 path="*"을 사용한다.  path="*"를 사용한 404 페이지 설정가장 간단한 방법은 를 추가하여 404 페이지를 만들고, 존재하지 않는 경로로 이동할 경우 해당 페이지를 렌더링하는 것이다.// App.js import { BrowserRouter as Router, Routes, Route } from "react-router-dom";import HomePage from "./pages/HomePage";import Abou..

Axios 이해하기Axios는 브라우저와 Node.js 환경에서 사용할 수 있는 HTTP 클라이언트 라이브러리이다. 리액트에서 Axios를 사용하면 REST API와 통신하거나 외부 서버로부터 데이터를 가져오고, 데이터를 전송하는 작업을 간단히 처리할 수 있다. 특히, AJAX(Asynchronous JavaScript and XML) 요청을 쉽게 만들 수 있도록 도와주며, 그 결과를 다루는 데 편리하다. Axios는 Promise 기반으로 비동기 처리를 지원하고, 요청과 응답에서 JSON 데이터를 자동으로 처리하는 기능을 제공한다. 또한, 다른 비동기 통신 API(예: fetch)보다 사용하기 간편하고, 다양한 기능(인터셉터, 요청 취소, 타임아웃 설정 등)을 제공해 백엔드와의 통신을 효율적으로 관리할..

React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks    오류 발생 원인useEffect가 조건문 안에서 호출되거나, 렌더링에 따라 조건적으로 호출되는 경우에 React가 훅을 호출하는 순서를 추적할 수 없어서 에러가 발생한다.예를 들어, useEffect가 조건에 따라 호출되면, React는 그 조건이 변경될 때마다 훅이 호출되는 순서가 달라지므로 상태를 관리할 수 없다.   오류 해결방법useEffect를 제일 최상단에 넣으니까 해결된 이유는 리액트 훅 규칙 때문이다. 리액트 훅은 ..