React58 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. React6일차-React router dom2 오늘은 주소 뒤에 이상한 숫자 붙어서 다른 창을 보여주는것을 해보겠다 만들었던 폴더에서 vscode창을 열어주자 그다음 src/App.js로 들어가자 여기 routes 내부에 추가해주자 /profile/이 뒤에 뭐가 붙어있으면 그걸 id라는 요소에 저장하고profile이라는 컴포넌트를 뛰워주겠다는 의미이다. 그럼 이제 page/Profile.jsx를 가보자 이제 뒤에 붙는 주소마다 내용이 달라지는 확인 하기 위해 import { useParams } from "react-router-dom"; 이걸 젤 위에쓰고 (react-router-dom 안에서useParams이거만꺼내서 쓰겠다는 의미이다) const { id } = useParams();이걸 리턴위 함수내부에 쓰고 (useParams() 내부에서 .. 2022. 1. 25. React6일차-React router dom 오늘은 시작하기전에 React에 도움이되는 크롬 확장프로그램을 알아보자 React Develop Tools이걸 설치해보자 react관련 창을 키고 콘솔창을 키고 >>이걸 눌러보면 두개가 추가됬다 위에 components는 클릭해준 컴포넌트가 해당되는 부분을 창에표시해준다 profiler는 이런식으로 로딩시간을 알려준다 이제 진짜 시작해보겠다 바탕하면에서 우클릭 해서 vscode를 열어주자 (우클릭 code(으)로 열기) 터미널-새터미널러 터미널 열어주고 npx create-react-app 폴더명 치고 엔터 이제 cd 폴더명 치고 엔터 code . -r 치고 엔터 하면 만들어진 폴더에서 vscode가 열어질것이다 또 터미널-새터미널 열어주자 npm i react-router-dom 치고 엔터(react-.. 2022. 1. 25. 이전 1 ··· 8 9 10 11 12 13 14 15 다음
