프론트엔드7 React Router의 useNavigate 훅을 사용하여 페이지 이동 기능을 구현 import { useNavigate } from 'react-router-dom';const MyComponent = () => { //useNavigate를 사용하여 navigate 함수를 가져옵니다. const navigate = useNavigate(); const handleClick = () => { // 버튼이 클릭되면 handleClick 함수가 호출됩니다. // '/new-page'로 이동 navigate('/new-page'); }; return ( //handleClick 함수 내에서 navigate 함수를 사용하여 '/new-page'로 페이지를 이동합니다. button onClick={handleClick}>이동하기button> );}; 이 코드를 실행하.. 2024. 5. 29. 테이블 `` 태그는 HTML 테이블에서 테이블 데이터를 정의하는 데 사용됩니다. ``는 "table data"를 의미하며, 테이블의 개별 셀을 나타냅니다. `` 요소는 항상 `` 요소(테이블 행) 내에 포함되어야 합니다. 각 `` 요소는 하나 이상의 `` 요소를 포함할 수 있습니다. ### 예제 //1 행 Header 1 Header 2 Header 3 // 2행 Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 //3행 Row 2, Cell 1 .. 2024. 5. 22. 주소 연결하기 black-button 은 . black-button 으로 css 적용 )-->button id="redirectButton" class="black-button">캘린더button>script> // 버튼 이벤트 처리(위의 id 와 getElementById()의 괄호 아이디 동일하게) document.getElementById("redirectButton").addEventListener("click", function() { // 버튼을 클릭하면 지정된 URL로 이동( board-front/DatePicker/index.html은 파일명) window.location.href = "http://127.0.0.1:5500/board-front/DatePicker.. 2024. 5. 14. import { Outlet, useLocation } from 'react-router-dom'; React Router-dom에서의 Outlet과 useLocation 사용React Router-dom은 React 애플리케이션에서 라우팅 및 페이지 전환을 쉽게 관리할 수 있게 해주는 라이브러리입니다. 이 라이브러리에서 제공하는 Outlet과 useLocation은 특히 중요한 역할을 합니다. 이번에는 이 두 가지 기능에 대해 알아보도록 하겠습니다.OutletOutlet은 React Router v6에서 도입된 특별한 컴포넌트입니다. 이 컴포넌트는 라우터에 의해 현재 경로에 맞는 컴포넌트를 렌더링하기 위해 사용됩니다. 보통 중첩된 라우트에서 사용되며, 부모 라우트 컴포넌트에서 Outlet을 사용하여 하위 라우트 컴포넌트를 렌더링합니다. 이를 통해 라우트 간의 계층 구조를 유지하면서 렌더링할 컴포넌트를.. 2024. 5. 12. 이전 1 2 다음
