[리액트를 다루는 기술] 리액트 라우터_1

13.1 라우팅이란?

웹 어플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다.

• 리액트 라우터(React Router) : 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용한다. 컴포넌트 기반으로 라우팅시스템을 설정할 수 있다.
• Next.js : 리액트 프로젝트의 프레임워크이다. Create React App 처럼 리액트 프로젝트를 설정하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능을 제공한다. 파일 경로 기반으로 작동하며 리액트 라우터의 대안으로 많이 사용한다.

13.2 싱글 페이지 어플리케이션(SPA)

하나의 페이지로 이루어진 어플리케이션

13.3 리액트 라우터 적용

• Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기
• //Route 컴포넌트 사용방법 <Route path="주소규칙" element={<보여 줄 컴포넌트 />} />
• Link 컴포넌트를 사용해 다른 페이지로 이동하는 링크 보여주기Link 컴포넌트 역시 a 태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저의 주소의 경로만 바꾸는 기능이 내장되어 있다.
• //Link 컴포넌트 사용방법 <Link to="경로">링크 이름<Link/>
• 웹 페이지에서는 링크를 보여줄 때 a 태그를 사용하지만, 리액트 라우터를 사용하는 프로젝트에서는 a를 사용하면 페이지를 새로 불러온다.

13.4 URL 파라미터와 쿼리스트링

• URL 파라미터 예시 : /profile/velopert
• 쿼리스트링 예시 : /articles?page=1&keyword=react

URL 파라미터는 주로 ID 또는 이름을 사용하여 특정 데이터를 조회할 때 사용한다.

쿼리스트링은 키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용

• URL 파라미터
  • useParams
  • //profile.js import React from "react"; import { useParams } from "react-router-dom"; const data = { mocha: { name: "박현기", description: "예비 개발자", }, velopert: { name: "김민준", description: "리액트를 다루는 기술 저자", }, }; const Profile = () => { const params = useParams(); const profile = data[params.username]; return ( <div> <h1>사용자 프로필</h1> {profile ? ( <div> <h2>{profile.name}</h2> <p>{profile.description}</p> </div> ) : ( <p>존재하지 않는 프로필입니다.</p> )} </div> ); }; export default Profile;
• 쿼리 스트링
  • useLocation
    • pathname : 현재 주소의 경로(쿼리스트링 제외)
    • search: 맨 앞의 ? 문자를 포함한 쿼리스트링 값
    • hash: 주소의 # 문자열 뒤의 값(주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용한다.)
    • state: 페이지로 이동할 때 임의로 넣을 수 있는 상태 값
    • key: location 객체의 고유값, 초기에는 default이며 페이지가 변경될 때마다 고유의 값이 생성된다.

    import React from "react";
    import {useLocation} from 'react-router-dom'
    
    const About = () => {
        const location = useLocation():
      return (
        <div>
          <h1>소개</h1>
          <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
          <p>쿼리스트링: {location.search}</p>
        </div>
      );
    };
    
    export default About;
    

  • 이 Hook은 location 객체를 반환한다. 이 객체는 현재 사용자가 보고 있는 페이지의 정보를 지니고 있다.
  • useSearchParams

    import React from "react";
    import { useSearchParams } from "react-router-dom";
    
    const About = () => {
      const [searchParams, setSearchParams] = useSearchParams();
      const detail = searchParams.get("detail");
      const mode = searchParams.get("mode");
    
      const onToggleDetail = () => {
        setSearchParams({ mode, detail: detail === "true" ? false : true });
      };
      const onIncreaseMode = () => {
        const nextMode = mode === null ? 1 : parseInt(mode) + 1;
        setSearchParams({ mode: nextMode, detail });
      };
    
      return (
        <div>
          <h1>소개</h1>
          <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
          <p>detail: {detail}</p>
          <p>mode: {mode}</p>
          <button onClick={onToggleDetail}>Toggle detail</button>
          <button onClick={onIncreaseMode}>Mode + 1</button>
        </div>
      );
    };
    
    export default About;
    

  • 쿼리스트링을 쉽게 파싱하여 사용할 수 있는 Hook