React / Router

React Router 

React에서 SPA 방식으로 라우팅할 수 있게 해주는 라이브러리

* 라우팅 : 요청 주소에 맞는 화면을 보여주는 것

 

 

 

사용 방법

설치

이미 생성된 react 프로젝트에 설치해주면 된다.

npm i react-router-dom

 

 

 

 

 

주요 컴포넌트

<BrowserRouter>

React Router를 사용하고 싶은 곳을 해당 컴포넌트로 감싼다.

이 때 아래처럼 App 컴포넌트를 감싸게 되면 라우팅 기능을 앱 전체에 적용시켜주기 때문에 이러한 방식이 많이 사용된다.

 

* StrictMode는 애플리케이션 내 잠재적인 문제를 알아내기 위한 도구로, UI는 렌더링하지 않으며 자손들에 대한 부가적인 검사와 경고를 활성화한다.

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
);

 

<Link>

페이지의 새로 고침 없이 이동하도록 도와주는 컴포넌트로, to 속성을 이용해 이동하고 싶은 주소로 이동할 수 있다.

이 때 Link 컴포넌트는 브라우저에서 <a>요소로 표시되는데, a요소와 달리 새로고침이 발생하지 않고 주소만 변경된다.

 

실습 시 아래 코드에서 메인을 눌렀을 때, 주소가 http://localhost:5173/main으로 이동될 것이다.

function App() {
  return (
    <nav>
      <Link to="/main">메인</Link>
      <Link to="/mypage">마이페이지</Link>
      <Link to="/test">테스트</Link>
    </nav>
  );
}

 

 

<Routes>

<Route> 컴포넌트들을 묶어주는 역할

 

<Route>

주소에 맞는 컴포넌트를 화면에 표시

function App() {
  return (
    <>
      <nav>
        <Link to="/main">메인</Link>
        <Link to="/mypage">마이페이지</Link>
        <Link to="/test">테스트</Link>
      </nav>

      <Routes>
        <Route path="/main" element={<Main />} />
        <Route path="/mypage" element={<Mypage />} />
        <Route path="/test" element={<Test />} />
      </Routes>
    </>
  );
}

function Main() {
  return <div>mainPage</div>;
}

function Mypage() {
  return <div>myPage</div>;
}

function Test() {
  return <div>test</div>;
}

 

 

 

주요 함수

useNavigate()

특정 주소로 이동할 수 있게 해주는 함수 생성

이 때 인자값으로 숫자를 1, -1이아니라 2, -2로하면 두번 앞으로 가거나 뒤로가게 된다.

 

const navi = useNavigate()
navi('/main') // main으로 이동
navi(1) // 앞으로 가기
navi(-1) // 뒤로 가기

 

Link컴포넌트 대신 useNavigate를 사용할 수도 있다.

const navi = useNavigate();

return (
<>
  <nav>
    <button onClick={() => navi('/main')}>메인</button>
    <button onClick={() => navi('/mypage')}>마이페이지</button>
    <button onClick={() => navi('/test')}>테스트</button>
  </nav>

  <Routes>
    <Route path="/main" element={<Main />} />
    <Route path="/mypage" element={<Mypage />} />
    <Route path="/test" element={<Test />} />
  </Routes>
</>
);

 

 

useLocation()

현재 페이지의 위치 정보를 담고 있는 객체 생성

const location = useLocation()
location.pathname // 현재 경로명
location.search // 쿼리 문자열

 

콘솔창으로 확인해보면 아래처럼 출력된다.

const location = useLocation();
console.log(location);
console.log(location.pathname);
console.log(location.search);

 

 

이때 쿼리스트링값인 search가 아예 ''인걸 볼 수 있다. 아직 쿼리 스트링 값을 딱히 가져오지 않아서 그런 것인데, 주소에 임의로 쿼리 스트링 값을 넣어주면 이렇게 출력되는 것을 볼 수 있다.

 

 

 

쿼리 스트링 ⬇️

쿼리 스트링(쿼리 문자열, 쿼리 파라미터)이란 데이터 전달 방식으로 보통 get 방식으로 데이터를 요청할 때 사용된다.

기본적으로 ?로 시작하며 키=값의 형태로 나타내고, 여러 쌍일 경우 &로 구분한다.

 

나무위키같은 페이지에서는 리다이렉트를 통해 어느 검색어로부터 왔냐는 표현으로 from이라는 키의 쿼리 문자열 값을 사용한다.

예를 들어 내가 나무위키 검색창에 '엔믹스'를 검색했을 때, 엔믹스의 정보를 담고 있는 문서는 NMIXX이기 때문에 다음과 같이 표현된다.

https://namu.wiki/w/NMIXX?from=엔믹스

 

 

 

useParams()

주소의 쿼리 파라미터 값을 담은 객체 생성.
url 패턴에 맞게 변수를 동적으로 읽어가져오기 때문에 컴포넌트마다 다른 url 값을 전달받을 수 있다.

const params = useParams()
params.param1 // param1이라는 이름으로 들어온 값
params.name // name이라는 이름으로 들어온 값

 

라우트 경로에서 name이라는 변수를 지정해줬을 때 경로 변수명인 name이 key가 되고, name의 값이 문자열로 들어온다.

      <Routes>
        <Route path="/main/:name" element={<Main />} />
        <Route path="/mypage" element={<Mypage />} />
        <Route path="/test" element={<Test />} />
      </Routes>
    </>
  );
}

function Main() {
  const params = useParams();
  console.log(params.name);
  return <div>mainPage</div>;
}

이 때 이 코드에선 아직 name에 값을 지정해주지 않았기 때문에 임의로 주소에 값을 입력해주면

 

params.name = "hello"

 

 

 

useSearchParams() 

주소의 쿼리 스트링 값을 가져올 수 있는 객체와 쿼리 스트링을 수정할 수 있는 함수 생성

const[searchParams, setSearchParams] = useSearchParams()
searchParams.get('name') // name으로 들어온 쿼리 스트링
setSearchParams({name:'하연'}) // name 쿼리 스트링 수정

 

보통 수정은 안하고 값을 가져올 때 많이 사용된다고 한다...

      <Routes>
        <Route path="/main" element={<Main />} />
        <Route path="/mypage" element={<Mypage />} />
        <Route path="/test" element={<Test />} />
      </Routes>
    </>
  );
}

function Main() {
  const [searchParams, setSearchparams] = useSearchParams();
  console.log(searchParams.get('name'));
  console.log(searchParams.get('school'));
  return <div>mainPage</div>;
}

 

이번에도 아직 쿼리 스트링 값이 딱히 없기 때문에 실행시킨 상태에서 이번엔 쿼리스트링 값을 여러개 넣어줬다

 

 

각각 name의 값과 school의 값을 가져오는 것을 확인할 수 있다.