1015 TIL-U

예전 글보니까, 10월 5일 이후에 고래에 내가 19일에 가는데, 그때까지
13~22까지 듣는다고 써놨다!

오늘 21인데, TIL 매일 적기로 했는데 아무리 범위 다들었다고 안적는것도 이상하고, 21챕터 분량이 다른때보다 긴편이기때문에, 3번 정도 나눠서 글 작성할것 같다.

Section 21 리액트 라우터가 있는 SPA 다중페이지 구축하기

우선, 프엔 기술면접 대비 질문에 제일 자주 나오는 단어가 위에 하나 있다!

SPA가 무엇이냐 라는 것에 대한 질문을 꽤 받을텐데!

정리해보면,

SPA(Single Page Application)는 단일 페이지 애플리케이션을 의미하며, 하나의 HTML 페이지로 구성된 웹 애플리케이션이다. SPA는 페이지가 로드된 후에는 페이지 전체를 다시 로드하지 않고, 사용자가 요청한 부분만 동적으로 업데이트한다.

추가로 내가 해봤던 프로젝트에서, Next.js를 기반으로 한적이 있었고, SPA를 같이 얘기해볼수 있을것 같다.

Next.js는 기본적으로 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하지만, 특정 부분에서 SPA의 장점을 활용할 수도 있다
그중 난 ,

페이지 전환의 부드러움을 뽑고 싶다!

Next.js에서는 기본적으로 Link 컴포넌트를 통해 페이지 간 이동 시 클라이언트 사이드 네비게이션이 이루어진다. 이는 SPA와 비슷한 사용자 경험을 제공하며, 페이지를 새로고침하지 않고도 URL이 변경된다. 이 부분에서 SPA의 장점인 부드러운 사용자 경험을 연출한다.

TIL1) 라우팅: 싱글 페이지 애플리케이션에서 다수의 페이지 보여주기

SPA(Single Page Application)에서는 하나의 HTML 페이지에서 여러 페이지를 보여줄 수 있다. React Router는 SPA에서 다중 페이지 경험을 제공하는 라이브러리이다.

React Router는 URL과 컴포넌트를 매칭하여, 페이지 간 전환 시 전체 페이지를 새로고침하지 않고 필요한 컴포넌트만 업데이트한다.

라우팅이란 사용자가 특정 URL을 방문했을 때, 해당 URL에 맞는 컴포넌트를 렌더링하는 작업

React Router는 기본적으로 BrowserRouter, Route, Switch, Link 같은 컴포넌트를 사용하여 페이지 간 네비게이션을 처리한다.

Router: 전체 애플리케이션을 라우팅 가능한 환경으로 설정
Route: 특정 URL과 컴포넌트를 연결
Switch: 경로에 맞는 첫 번째 컴포넌트를 렌더링

TIL2) 두 번째 라우트 추가하기

새로운 페이지를 추가할 때, React Router에서 새로운 경로(Route)를 추가하면 됩니다. 이때 페이지 이동은 전체 새로고침 없이 부드럽게 이루어진다.

Route 컴포넌트를 사용하여 새로운 경로를 추가하면 됩니다.
Link 컴포넌트를 사용하면 SPA의 장점인 부드러운 페이지 전환을 경험할 수 있다.

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

TIL3) 레이아웃 및 중첩된 라우트

레이아웃 컴포넌트를 활용하여 공통 UI 요소(헤더, 사이드바 등)를 여러 페이지에서 재사용할 수 있다.
중첩된 라우트를 통해, 하위 페이지나 특정 섹션별로 라우팅을 구현할 수 있다.

Route 안에 또 다른 Route를 중첩시켜 하위 페이지를 구성할 수 있다. 이는 대규모 SPA에서 페이지 구조를 좀 더 체계적으로 관리할 수 있게 도와준다.

TIL4) 동적라우트

동적 라우트는 URL 파라미터를 기반으로 컴포넌트를 동적으로 렌더링하는 라우팅 방식입니다. 예를 들어, 특정 게시물 ID에 따라 각기 다른 내용을 보여줄 수 있다.

React Router에서 동적 라우트를 처리하려면 :id와 같은 방식으로 경로를 설정합니다. 그리고 useParams 훅을 사용해 URL 파라미터를 가져올 수 있다.

번외!

오늘 강의에서 반가운친구가 나왔다! 지난번 듣게(?) 보게(?)된 것.

Outlet은 부모 컴포넌트가 렌더링될 때, 자식 컴포넌트(즉, 중첩된 라우트)에 해당하는 내용을 표시하는 "자리" 역할을 하는 컴포넌트. 부모 라우트의 레이아웃 내에 자식 라우트의 컴포넌트들이 동적으로 렌더링되게 도와준다.

왜 Outlet이 필요한가?

SPA 구조에서 페이지가 계층적으로 나뉘어 있을 때, 레이아웃이 공통된 여러 페이지를 관리할 때 특히 유용하다. 예를 들어, 대시보드 레이아웃을 공유하는 여러 하위 페이지가 있을 경우, 공통 레이아웃은 그대로 유지한 채로 하위 페이지 내용만 바꿀 수 있도록 도와준다.

Outlet의 활용

모듈화된 SPA 구조: 복잡한 SPA에서 대규모 페이지들을 관리할 때, 각 페이지에 공통된 요소(예: 헤더, 사이드바)를 재사용하면서 특정 영역만 교체할 수 있게 해줍니다.

질문거리

React Router의 중첩 라우트와 성능 이슈:

중첩된 라우트를 사용할 때, 다수의 중첩된 라우트가 있는 경우에도 성능 문제가 없을까요? 특히 많은 중첩 라우트가 포함된 SPA에서 성능을 유지하기 위한 권장사항

Next.js와 React Router 비교:

이전 프로젝트에서 Next.js를 사용해봤는데, Next.js와 React Router를 사용한 SPA의 차이점과 장단점을 알고싶습니당.
특히 Next.js의 SSR과 React Router의 클라이언트 사이드 네비게이션 측면에서 어떤 상황에서 더 유리할지