🔹 SPA 🤔
프론트엔드 자격요건을 보면 SPA라는 단어를 많이 접해봤다.
SPA는 Single Page Application의 약자이다.
=> 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. 서버로 부터 새로운 페이지를 불러오지 않으므로 다시 로드되지 않는다.
과거와 현재의 웹사이트를 비교하면 예전의 웹 어플리케이션은 페이지 이동마다 깜빡임이 발생하고 서버의 부담이커서 속다가 느렸다.
BUT!!!
🔹 React-Router 🤔
- Routing => URL에 따라 알맞은 콘텐츠(UI)를 전달해주는 기능이다.
React-Router는 React 와 JS를 위한 라우팅 라이브러리이다.
React-Router는 3가지의 패키지가 존재한다.
- reat-router
- react-router-dom (web 개발)
- react-router-native (app 개발)
React-Router 적용하기
VS CODE 터미널에서 npm add react-router-dom@6 입력을 하면 설치가 된다.
<BrowserRouter>- 제일 최상위에 감싸야한다.
- 웹 브라우저에서 리액트 라우터를 실행시키기위해 필요한 인터페이스다.
- 브라우저 주소바에 보여지는 현재 위치를 저장한다.(네비게이트)
- 브라우저 히스토리 스택을 사용해서 네비게이트 기능을 가능하게 해줌.
<Routes>- 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
-
<Route>- Route는 path에 따라 해당 UI를 보여주는 라우팅 기능을 가진 컴포넌트 로, path=""부분에 URL 경로를 적고, 렌더링될 컴포넌트를 자식요소로 넣어주면 된다.
-
<Link>- Link 컴포넌트를 사용하는데, 생김새는 a태그를 사용하지만, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.
- a 태그를 클릭하면 새로고침이 되며 tech를 불러오게 된다.(미세하지만 새로고침이 된다.)
<Outlet>- 부모의 라우트 엘리먼트에서 자식 라우트 엘리먼트를 렌더링 할 때 쓴다.
- 부모 컴포넌트에서 하단에 작성하면 됨
- 배출구라고 생각하면 된다.
🔹 UseParmas()
path parameter의 정보를 얻을 수 있는 Hooks이다.
:docId 와 같이 :을 이용하여 설계하면 react/ 뒤에 설정한 값이 오게 된다.
🔹 UseNavigate()
useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공합니다.
Front-end