5주차 Front-E 스터디 TIL React

리액트는 SPA + CSR 채택중

spa : single page app
-> 서버로 부터 첫 페이지만 받아오고 나머지 동적으로 받아온다

mpa : multiple page app
-> 서버로부터 매번 완전한 페이지를 받아온다.

라는 개념을 알아두고,

CSR : Client Side Rendering
-> 데이터 없이 HTML을 받아온 후 static 파일 로드함
뒤에 데이터를 서버에 요청해서 렌더링한다,

SSR : Server Side Rendering
->데이터까지 삽입된 상태의 완성된 HTML 받아옴

라우팅 (Routing) 이란,
사용자가 요청한 URL 에 따라 페이지를 보여주는 것이다.

React Router는 사용자가 입력한 주소를 감지하고
여러 환경에서 동작할 수 있도록 다양한 종류의 라우터 컴포넌트를 제공함

이를 통해 spa 기법을 그대로 유지한 상태로
리액트에서 페이지 이동처리를 할 수 있다.

1. react router 설치하기

React App 디렉터리에서
npm install react-router-dom으로 설치
(혹은 yarn add react-router-dom)

2. App.js 에 경로 추가

<BrowserRouter> 안에 <Router>로 감싸준 상태에서 
<Route path=url명 element=컴포넌트>

3. 페이지 이동 버튼 만들기

const navigate = useNavigate() 로 선언 후
navigate('url')로 이동
혹은 <Link> 컴포넌트를 활용할 수 있음

url 파라미터

https://홈페이지url/product/23
<Route path="/product/:productid" element={컴포넌트}/> 처럼 사용

컴포넌트 내에서는 
const {productid} = useParams();
의 형태로 접근가능하다.

쿼리 스트링

https://홈페이지url?product=23&option=blue
별도 설정이 필요한 것은 아니다
컴포넌트 내에서는 
const [searchParams, setSearchParams] = useSearchParams();
cosnt id = searchParams.get('product');
로 접근 및 사용

중첩 라우팅 - 나중에 자세히 알아보기, 사용해보기
1. route 중첩
2. Outlet으로 위치 지정하기
3. -> /about/location으로 접근 가능.

[실습] 단어장 만들어보기!!