無제

🟡 React Router (react-router-dom) React Router는 React 애플리케이션에서 클라이언트 사이드 라우팅(Client-side Routing)을 구현하기 위한 라이브러리. react-router-dom은 이를 웹 브라우저 환경에서 사용할 수 있도록 제공하는 패키지. ◼️ 주요 특징 1️⃣ URL에 따른 화면 렌더링 (Routing) URL 경로에 따라 서로 다른 React 컴포넌트를 화면에 표시할 수 있다.} />} /> 예를 들어 /about, /products와 같은 경로에 접근하면 설정된 컴포넌트를 렌더링한다. 2️⃣ 동적 URL 처리 (URL Parameters) URL에 값을 포함하여 하나의 컴포넌트로 여러 페이지를 처리할 수 있다. } />/product..

🔎 React에서 map() 함수 사용하기map()은 배열의 각 요소를 순회하며 새로운 배열을 반환하는 JavaScript 배열 메서드. ◼️ 기본 사용법 배열의 각 요소를 하나씩 꺼내 JSX를 반환하면 React가 화면에 렌더링한다. function App() { const names = ["갓대희", "김대희", "한대희"]; return ( {names.map((name) => ( {name} ))} );}중괄호({})를 연다.JSX 안에서 JavaScript 코드를 사용하기 위해 {}를 작성한다.반복할 배열 이름을 작성한다.반복할 데이터가 들어 있는 배열을 선택한다.map() 메서드를 호출한다.배열의 각 요소를 순회하며 JSX를 반환한다.화..

🟡 Hash URL (Fragment Identifier)URL에서 # 뒤에 오는 부분을 해시(Hash) 또는 프래그먼트 식별자(Fragment Identifier, Fragment) 라고 한다. ◼️ 원래 용도 (앵커 이동)Hash는 원래 HTML 문서 내부의 특정 위치로 이동하기 위해 만들어졌다.3장3장으로 이동https://example.com/page.html#chapter3위 URL에 접속하면 브라우저는 id="chapter3"인 요소까지 자동으로 스크롤한다. SPA가 등장하면서 이 기능을 라우팅 용도로 활용하게 된 것이다. ◼️ 주요 특징 1️⃣ 서버에 새로운 페이지를 요청하지 않음 (Client-Side Routing) URL의 해시(#) 부분만 변경되면 브라우저는 서버에 새로운 HTML..