목록ReactJS (16)

대기업을 향한 디벨롭 블로그

404 페이지 만들기 Router-4

이번엔 404페이지를 만들거다. https://mhypro.tistory.com/48 Router를 이용해 페이지를 나누어보자. Router - 1 리액트 Router를 사용해볼 것 이다. 일단 Route라는 뜻은 노선 이라는뜻이다. 이 말은 URL에 따라 그에맞는 페이지를 보여주게 된다. 제일 먼저 셋팅을 해보자 react-router-dom 라이브러리 셋팅 node환경 mhypro.tistory.com Router를 모른다면 이걸먼저 보는걸 추천한다. 404Page는 맞지않는 URL을 입력했을때의 페이지를 보여지게 된다. 즉 사용자입장에서 이상한 URL을 입력했을때 잘못입력했다는 페이지를 띄어주는거다. 코드로 봐보자. 일단 404페이지를 띄울 컴포넌트 먼저 만들어보자. 그런다음 Routes에서 한줄만..
ReactJS 2022. 7. 6. 16:25
Nested Routes 중첩 라우터 Router - 3

https://mhypro.tistory.com/48 Router를 이용해 페이지를 나누어보자. Router - 1 리액트 Router를 사용해볼 것 이다. 일단 Route라는 뜻은 노선 이라는뜻이다. 이 말은 URL에 따라 그에맞는 페이지를 보여주게 된다. 제일 먼저 셋팅을 해보자 react-router-dom 라이브러리 셋팅 node환경 mhypro.tistory.com 이번엔 중첩경로(Nested Routes) 를 알아보자 Nested 의 뜻은 중첩이라는 뜻이다. 중첩 경로는 ex) localhost/one/post 이런식의 경로의 경로이다. 즉 최상위경로만을 다루면 많은 페이지를 다루기 힘들것 이다. 예를들면 /shoes가 있다면 /shoes/yellow(노란신발들) /shoes/blue(파란신발..
ReactJS 2022. 7. 6. 15:54
useNavigate Hook Router - 2

Router - 1 포스트를 이어서 시작한다. 1에서 쓰던 코드를 그대로 사용할 것 이다. https://mhypro.tistory.com/48 Router를 이용해 페이지를 나누어보자. Router - 1 리액트 Router를 사용해볼 것 이다. 일단 Route라는 뜻은 노선 이라는뜻이다. 이 말은 URL에 따라 그에맞는 페이지를 보여주게 된다. 제일 먼저 셋팅을 해보자 react-router-dom 라이브러리 셋팅 node환경 mhypro.tistory.com 먼저 navigate를 알아보자 navigate의 뜻은 탐색이다 즉 URL을 탐색한다고 생각하면된다. 코드로 알아보자. ex) navigate('/one') -> localhost:3000/one 먼저 useNavigate훅을 import를 해..
ReactJS 2022. 7. 6. 15:27
Router를 이용해 페이지를 나누어보자. Router - 1

리액트 Router를 사용해볼 것 이다. 일단 Route라는 뜻은 노선 이라는뜻이다. 이 말은 URL에 따라 그에맞는 페이지를 보여주게 된다. 제일 먼저 셋팅을 해보자 react-router-dom 라이브러리 셋팅 node환경 터미널에서 npm install react-router-dom@6 입력하여 설치해 준다. 마지막 @6은 버전을 뜻한다. 설치가 완료되면 제일먼저 BrowerRouter라는 컴포넌트를 사용할것인데 BrowerRouter란 *HTML5 기록 API(pushState, replaceState 및 popstate 이벤트)를 사용하여 UI를 URL과 동기화된 상태로 유지하는 * 즉 페이지가 새로고침하지않아도 URL에 따라 새로운 페이지를 구성할 수 있다. SPA(SinglePageAppli..
ReactJS 2022. 7. 6. 11:05
이전 Prev 1 2 3 4 Next 다음