React - router

SPA

• 하나의 페이지로 이루어진 애플리케이션
  (사용자들은 멀티페이지로 느낌)
• 싱글페이지는 기술적으로 한 페이지만 존재하지만 사용자가 경험하기에는 여러 페이지가 존재하는 것처럼 느낀다.
• 브라우저의 주소창의 값만 변경하고 기존 페이지에서 띄웠던 웹 애플리케이션을 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여준다. 이렇게 HTML은 한번만 받아와서 웹 애플리케이션을 실행시킨 후, 이후에는 필요한 데이터만 받아와서 화면에 업데이트하는 것이 싱글 페이지 애플리케이션이다

router 설치

BrowserRouter라는 컴포넌트가 웹 애플리케이션에 html5의 History API를 사용하여 페이지를 새로 불러오지 않고도 주소를 변경하고 현재 주소의 경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있게 해준다.

'/'로 경로 변경

• index.js
  
• Home.js
  
• About.js
  
• App.js
  
• 결과
  
• 주소뒤에 /about을 입력한 결과
  

URL 파라미터와 쿼리스트링

• URL 파라미터 예시 :
  /profile/variable
  (주소 경로에 유동적인 값을 넣은 형태 -> 웹에서 메뉴를 선택했을 때 보여지는(조회) 화면의 URL)
• 쿼리스트링 예시(검색하는 사이트의 대부분 이렇게 들어간다) :
  /articles?page=1&keyword=react
• 페이지네이션 : 데이터의 목록을 페이지로 나누어서 처리하는것. 예를 들어 게시글이 100이면 1페이지당 10개의 목록이 보여주게 처리하는 방법

router의 흐름

App -> Home.js -> Link to~ 선택하면 해당 컴포넌트가 보여진다
App의의 profiles로 인해 Home.js의
로 넘어간다
그 후 App의 :username은 Home.js의 profiles/name>으로 넘어가서 Profile.js에서 값을 받는다.

• App.js 수정
  
• Home.js 수정(프로필 값 입력)
  
• Profile.js 수정 (프로필 값 받을 수식 입력)
  
• 결과
  
  
  

쿼리스트링

• 쿼리스트링 값이 현재 ?detail=true&mode=1 로 표시.
  ?를 지우고, & 기준으로 문자열 분리한 뒤 key와 value를 파싱(구문을 분석)하는 작업을 처리해야 한다.(이전에는 npm에서 querystring 패키지를 설치하고 쿼리스트링을 따로 파싱하는 작업까지 전부 진행했었어야 했다)
• 리액트 라우터에서 v6부터 useSearchParams라는 hook을 통해 쿼리스트링을 할 수 있다.
• About.js 수정(useLocation 사용)
  
• About.js 다시 수정(useSearchParams 사용)
  
• 초기 상태
  
• mode 클릭
  

중첩된 라우트

App.js

<Route path='/articles' element={<Articles />}>
  <Route path=':id' element={<Article />} />
  </Route>

• Outlet 컴포넌트가 사용된 자리에 중첩된 라우트가 보여지게 된다.
• Articles.js 생성
  
• Article.js 생성
  

리액트 라우터 부가기능

• useNavigate
  Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하느 사황에 사용하는 hook
  
  
• NavLink
  링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 css 클래스를 적용하는 컴포넌트
  

1. <Route path="/articles" element={<Articles />}> 의
<ArticleItem id={1} /> 를 클릭하면 
2. 
      <NavLink
        to={`${id}`}
        style={({ isActive }) => (isActive ? activeStyle : undefined)}

        게시글 {id}
      </NavLink>
 {/* articles/:id */}
        <Route path=":id" element={<Article />} />
3.
import { useParams } from "react-router-dom";
const Article = () => {
  const { id } = useParams();
  return (
    <div>
      <h2>게시글 {id}</h2>
    </div>
  );
};
export default Article;

• NotFound.js 생성
  
• App.js 수정
  
• 결과
  

redirect

컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동하고 싶을때, 페이지 리다이렉트(redirect)

• Login.js 생성
  
• MyPage.js 생성
  
• App.js 수정