vscode17 React8일차-Login 오늘은 로그인 창을 만들어 보겠습니다. 폴더에서 vscode 창여시고 page에 Login.jsx만들어주세요 그리고 안에 import { useNavigate } from "react-router-dom"; export default function Home() { const navigate = useNavigate(); function login() { console.log("a"); navigate("/"); } return ( Login 페이지 입니다. 로그인 ); } 작성해주세요 App.js에 import 모여있는곳에 import Login from "./page/Login"; 추가 내부에 추가 이제 npm start를 해서 창을 확인해보겠습니다. http://localhost:3000/login.. 2022. 1. 27. React7일차-Link와 NavLink 오늘은 ,이거 두개를 알아보겠습니다. 우선 두개다 다른곳으로 연결해주는 것입니다. 그런데 왜 html에서 잘쓰느 이걸 안쓰냐 할수있습니다. 그이유는 우리는 페이지가 한개로 보여주는 컴포넌트만 다르게 바꺼주면됩니다. 링크는 누를때마다 로딩이되고 데이터를 다시받아옵니다. 하지만 ,는 로딩이 필요 없습니다. 그만큼 속도가 빨라지겠죠 ㅎㅎ 우선 부터 시작해보겠습니다. 기존폴더에서 vscode열어 주시고 src/page폴더에 Links만들고 import { Link } from "react-router-dom"; export default function Links() { return ( Home About Profile Profile/1 About?name ); } 넣어주세요 src/App.js로 가서 impo.. 2022. 1. 26. React7일차-notfound 이번에는 notfound창을 한번 만들어 보겠습니다. 사용하던 폴더에서 코드 열어서src/page폴더에 NotFound만들고 export default function NotFound() { return NotFound 페이지 입니다.; } 추가해주겠습니다. src/App.js로 이동해서 import 모여있는곳 바로밑에 import NotFound from "./page/NotFound"; Route 모여있는데 밑에 추가 해줄께요 그리고 npm start해서 주소에 이상한 값을 쳐봅시다 이렇게 NotFound가 제대로 나옵니다. 이제 우리가 설정한 페이지 말고는 다 NotFound창이 뜰것입니다. 이상 NotFound를 마치겠습니다 다음에는 조금 길수있으니 긴장하고 오세요 ㅎㅎ 2022. 1. 26. React7일차-React router dom3 오늘은 주소뒤에 ?붙는 거에 대해 알아보겟습니다. 우선 이번과정은 페이지를 만드는건 딱히 필요가 없습니다. 하지만 ?뒤에 붙은걸 가져올때 유용하겠죠 ㅎㅎ 시작해보겠습니다. 저번에 했던 폴더에서 vscode 열고 터미널에npm i query-string 으로 설치 해줄께요 이번에는 About 페이지를 기준으로 할거에요 src/page/About.jsx로 가서 젤위에 import queryString from 'query-string' import { useLocation } from "react-router-dom"; 추가 해주고 return 위에 const { search } = useLocation(); const name = queryString.parse(search).name; 추가 return .. 2022. 1. 26. 이전 1 2 3 4 5 다음
