📌SPA(Single Page App)를 만드는 그냥 라이브러리 일분 : SPA를 만드는 라이브러는 뷰, 엘귤러, 리액트 가 있다, 리액트가 가장 유명하다
(주소는 바뀌는데 새로고침은 되지 않고 화면이 면하는 것)
🎈React router dom : 리액트에서 SPA를 만드는데 사용 하는 것🎈SPA란?
어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA이다. 뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어난다. 페이지 변경이 일어난다고 보여지는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.
📌프로젝트 만들기
1.client, server폴더를 따로 만든다
2.clinet클릭후 통합 터미널을 연다
3.터미널에 npx create-react-app mbti : 리액트 환경 자동으로 구축 해준다
4.다운받아진 모든 폴더 client로 옮기고 mbti는 삭제 한다
5. npm install axios, npm install react-router-dom🔎참고
🎈axios : 브라우저나 node.js에서 비동기로 http 통신을 하기 위한 도구(제이쿼라 에서 ajax로 서버에 요청 보낼때 하는 개념 이라고 생각)
🎈react-router-dom : 페이지 이동을 위해 필요한 라이브러리
🎈라우팅 : 사용자가 요청한 url에 따라 해당 url에 맞는 페이지를 보여주는 것
🎈리액트 라우터 : 사용자가 입력한 주소를 감지 하는 역할을 하며, 여러 환경에서 동작하도록 라우터 컴포넌트 제공
(BrowserRouter, HashRouter로 나뉨)
서버 만드는 방법
server 폴더 -> sever.js만들기
npm init (다 엔터 치기)
(server -> 우클릭 -> open터미널)
다운받아야할 라이브러리
npm install nodemon
npm install express
npm install cors
서버끄는 것 : ctrl + c
서버키는 것 : npm start
(서버를 저장할때 마다 자동으로 껐다 켜지는 기능 nodemon)
📌React Router
React SPA구현에 가장 많이 사용되고 있는 react-router-dom
기존 방식의 를 사용하여 url 변경시 새로고침 하여 모든 페이지를 reload하면 시간이 걸리는 것에 반해
React는 SPA 체제로 새로고침 대신 Router를 사용하여 변경된 소스만 바꾸어 속도가 더 빠르다
[브라우저의 url과 컴포넌트를 연결하는 작업]
<Routes> <Route exact path="/" element="<Memeber />"> </Route> </Routes>명시적으로 해당 url에만 접근가능하도록 위해 exact는 필수였다.
🎈종류
react-router-dom : web에서 사용
react-router-native : app에서 사용
react-router : app, web 둘다 사용
BrowerRouter
HTML5의 history API를 활용하여 UI를 업데이트
동적 페이지에 적합
<Link>태그를 통해 to속성에 이동할 경로를 추가하여 이동 시킨다.
EX<BrouserRouter> <Link to="/"></Link> </BrouserRouter>새로고침 하면 경로를 찾지 못 해 에러 발생 -> 추가적인 세팅이 필요
새로고침시 해당 url을 바탕으로 페이지를 불러 온다
HashRouter
url의 hash를 활용한 라우터
주소에 #이 붙는다
주로 정적인 페이지 에서 사용
EX<HashRouter> <Route path="/" /> </HashRouter>새로고침 해도 에러 발생X
😊
chrome 웹 스토어 -> ColorZilla 다운 : 크론코딩 할때 해당 마우스커서가 있는 것에서 색을 따준다
클론코딩 할때 : 작업자 도구로 구조를 파악하는게 중요
✨중요 키워드
리액트 :
useState -> useEffect -> component -> React router dom -> 전역상태관리(Redux, Recoil)
