dom3 DOM 요소 선택 메서드 총정리 1. getElementByIdHTML 문서에서 특정 ID를 가진 요소를 찾아 반환하는 JavaScript 메서드document.getElementById('elementId')ID로만 요소 선택가장 빠른 성능단일 요소 반환 (또는 null)ID는 문서에서 고유해야 함예시1 )// 기본 선택const element = document.getElementById('myId');// 스타일 변경document.getElementById('myId').style.backgroundColor = 'red';// 클래스 조작const element = document.getElementById('myId');element.classList.add('active'); // 클래스 추가element.classL.. 2025. 2. 12. React Router Dom 훅 📍중첩 라우팅 import { Route, Routes } from 'react-router-dom'; 📍Outlet- 자식 경로요소를 렌더링하려면 부모 경로요소에서 을 사용해야 함- 하위 경로가 렌더링 될 때 중첩된 UI가 표시 될 수 있음 import { Outlet, Route, Routes } from 'react-router-dom'; 📍useLocation- 이 hook을 이용하여 현재 애플리케이션의 경로 정보를 가져올 수 있다- 현재 위치 객체를 반환 console.log(location.pathname); // 현재 경로의 경로명 console.log(location.search); // 현재 경로의 쿼리 문자열 console.log(location.hash); //.. 2024. 1. 23. 리액트 Router Dom 및 적용 📍라우팅흔히 말하는 '페이지 이동'정적 라우팅/동적 라우팅기본 라우팅 (정적 라우팅부터)// 가장 기본적인 라우팅 설정import { BrowserRouter, Routes, Route } from 'react-router-dom';function App() { return ( } /> } /> );} 2. 동적 라우팅URL에서 변수처럼 변하는 부분을 처리하는 방식예: /users/:id, /products/:category/:id// 동적 라우팅 예시} />} />[React] 리액트 동적 라우팅(Dynamic Routing) - useLocation, useNavigate, useParams, useSearchParams [React].. 2024. 1. 15. 이전 1 다음
