늘 겸손하게

React의 Route를 이용하여 개발을 하던 중에 맞닥뜨린 에러입니다. 문제 원인 react-router-dom 라이브러리가 v6으로 업데이트되면서 호환이 안되는 부분이 생겼다고합니다. https://reactrouter.com/docs/en/v6/getting-started/overview React Router | Quick Start Declarative routing for React apps at any scale reactrouter.com 해결 방법 1. 새로운 문법에 맞게 다시 작성 2. 이전 버전 사용 이전 버전 사용이 더 간편해서 저는 2번 방법으로 해결했습니다. 이전 버전으로 변경 아래 버전 중 1택 npm install react-router-dom@5.3.0 npm install..

JSX에서 &를 문자로 출력하고 싶다면 & 로 작성해주자 예시 ( 8번 줄 ) 1 2 3 4 5 6 7 8 9 10 11 12 function App() { return ( WEB Welcome Hello, React & Ajax ); } cs

단일 페이지 애플리케이션(Single Page Application), 즉 SPA를 만들때 중요한 점은 페이지가 리로드되지 않고 변경이 필요한 부분만 변경되는것인데 HTML의 a href를 이용했을때 단점은 링크를 클릭했을때 웹 페이지가 새로 로딩되는것입니다. 이러한 점을 보완하기 위한 React 컴포넌트가 바로 Link 입니다. 예시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function App() { return ( Hello React Router DOM Home Topics Contact Not Found ); } Colored by Color Scripter cs 위 코드의 a href를 클릭하면 원하는 링크로 접속이 되지만 웹 페이지 전체가 새로고침이 ..

React의 Router와 BrowserRouter와 HashRouter에 대한 간단한 설명과 BrowserRouter와 HashRouter에 대한 차이점을 소개하겠습니다. 1. React Router Routing이란? 요청한 URL에 맞는 웹 페이지를 보여주는 일을 말합니다. 이러한 라우팅을 담당하는 컴포턴트를 Router라고 부릅니다. 2. BrowserRouter BrowserRouter는 웹 브라우저에서 실행되는 React Router를 위한 인터페이스로 추천됩니다. BrowserRouter는 URL을 이용해 현재 위치를 브라우저의 주소창에 저장하고 브라우저에 내장되어 있는 history 스택을 이용해 URL를 탐색합니다. 3. HashRouter HashRouter는 URL이 서버에 전송되지 ..