늘 겸손하게

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이 서버에 전송되지 ..

create-react-app을 설치하고 React App을 실행하여 개발하면 2번씩 렌더링이 됩니다. 보통 설치 직후에 src/index.js를 보면 1 2 3 4 5 6 7 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Colored by Color Scripter cs root.render 하위에 React.StrictMode가 존재합니다. 이 React.StrictMode를 제거하면 Render가 두 번 출력되지 않습니다. 1 2 3 4 5 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Color..