개발천재

리액트 라우터 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..

[Immer] Immer only supports setting array indices and the 'length' property at die (http://localhost:3000/static/js/bundle.js:40209:11)  at ...  오류발생원인이 오류는 Immer가 배열의 인덱스나 length 속성을 제외한 다른 속성을 직접 변경하려고 할 때 발생한다. Immer는 불변성 유지를 위해 내부적으로 동작하며, 배열의 구조를 변경하는 작업은 제한적으로만 허용된다.  Immer는 다음과 같은 작업은 허용한다.배열의 특정 인덱스 값 변경배열의 length 속성 변경배열에 요소를 추가하거나 제거 (push, pop, splice 등) 그러나 배열에 직접적으로 새 속성을 추가하려고 하면 오..

리액트 라우터(React Router)는 리액트 애플리케이션에서 페이지 간 이동을 관리하는 라이브러리이다. 리액트는 기본적으로 단일 페이지 애플리케이션(SPA) 구조로 동작하기 때문에, 페이지 내에서의 URL 변경을 브라우저의 기본 방식으로 처리하는 대신, 리액트 라우터를 사용해 URL을 제어한다. 리액트 라우터를 사용하면 애플리케이션 내에서 페이지 이동을 쉽게 할 수 있다.import React from 'react';import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';function Home() { return Home Page;}function About() { return About Page;}funct..

리액트에서 페이지 간 이동과 URL 관리는 매우 중요하다. 페이지 이동을 처리하기 위해 react-router-dom 라이브러리를 사용하는데 이 라이브러리는 페이지간 이동을 간편하게 처리할 수 있도록 다양한 기능을 제공한다. 그중에서도 useNavigate, useLocation, URLSearchParams는 경로 이동, 현재 위치 정보 확인, 쿼리스트링 관리 등을 효과적으로 수행할 수 있도록 도와주는 필수적인 도구이다.  useNavigateuseNavigate는 페이지 이동(네비게이션)을 수행하는 Hook이다. react-router-dom에서 제공하며, 특정 경로로 이동하거나 뒤로 가기 등의 기능을 수행할 수 있다.import { useNavigate } from "react-router-dom"..

Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.  이 오류는 리액트에서 key 속성이 중복될 때 발생한다. 리액트는 컴포넌트 리스트를 렌더링할 때 각 항목을 고유하게 식별하기 위해 key 속성을 사용한다. 이를 통해 리액트는 항목의 변경, 추가, 삭제를 효율적으로 처리할 수 있는데 이 ..