TIL 20일차

React

SPA

전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했지만, SPA가 등장하면서 중복되는 부분은 제외하고 업데이트가 필요한 부분만 새로 불러올 수 있게 되었다.

SPA는 1990년대 후반에 개발된 방식으로 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여줄 수 있다.

장점

• 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자의 Interaction에 빠르게 반응한다.
• 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다.
• 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.

단점

• JavaScript 파일의 크기가 커지게 되어 파일을 기다리는 시간으로 인해 로딩 시간이 길어진다.
• 검색 엔진 최적화가 좋지 않다.

React Router

SPA 웹페이지를 만들때 해당하는 화면에 따라 주소가 달라지게 되는데 이에 따라 다른 뷰를 보여주는 과정을 경로에 따라 변경한다는 의미로 라우팅(Routing)이라고 한다.

React 자체에는 이런 기능이 없기 때문에 React Router라는 라이브러리를 통해 Route 기능을 구현할 수 있다. React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다.

• BrowserRouter : 라우터 역할
• Switch & Route : 경로를 매칭하는 역할
• Link : 경로를 변경하는 역할

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <MyPage />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;

BrowserRouter 컴포넌트 내에서 Link로 주소를 설정해준 텍스트를 클릭했을때 Switch 내에 있는 Route 중 해당하는 주소의 Route 내의 컴포넌트를 출력하게 된다. 단 '/'의 경우 "/about"나 "/dashboard"에도 "/"가 포함되어 있기 때문에 정확히 일치하는 Route를 찾을 수 있도록 exact라는 속성을 추가로 적어줘야 한다.