React + TIL

Single Page Application

브라우저를 통해 페이지를 보는 과정

1. 주소창에 url 입력
2. 해당 주소로 http get request
3. 해당 주소에 있는 서버가 http response 로 html file을 내려줌
4. 브라우저가 해당 html 파일을 해석하여 화면에 render

기존 web application 방식

1~ 4. 위와 동일
5. 새 페이지를 보여주고 싶으면 1~4를 반복

Single Page Application 방식

1~ 4. 위와 동일
5. 새 페이지를 보여주고 싶으면 페이지 이동 대신 JS를 이용하여 기존 dom을 새로운 dom으로 대체

SPA의 장단점

• 장점: 자연스러운 페이지 이동 사용자 경험을 제공
• 단점: render될 dom을 교체하는 작업 필요

React-Router

• react 프로젝트에서 SPA를 쉽게 도입할 수 있도록 도와주는 라이브러리

Link와 Routes

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/hello" element={<Hello />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

<Routes> 컴포넌트를 이용해서 <Route> 정의
<Route>는 path, element 라는 prop을 넘길 수 있음
path="/" path와 url이 일치한다면 element={<Main />}를 render함

• anchor태그 = 브라우저 url을 이동
  link태그 = 브라우저에 표시되는 url만 변경 (history는 쌓아짐)

parameter

• 가변 parameter의 앞에 콜론(:)를 붙이면 뒤 string 을 key로하는 parameter를 받을 수 있음

wildcard와 Navgiate

• wildcard:
  props.path로 (asterisk)를 넘겨주는 경우 모든 url에 대응
  Route는 순서대로 동작하므로, 일반적으로 는 가장 아래에 배치

• Navgiate:
  해당 url로 페이지를 이동시켜주는 컴포넌트