리액트 화면 이동

JunYoung·2023년 7월 24일

react에서 화면 이동을 위해 a 태그를 사용했다. 만들면서 든 생각은 이러면 공통적으로 들어가는 header 부분은 모든 파일마다 불러와줘야 되는 것 같은데? 또한, 화면이 이동될 때 마다 재로딩 되는데 이러면 다를게 없는 거 아닌가? 라는 생각이 들어서 효과적인 방법을 찾아보았다.

SPA란?

기존의 방식은 다른 페이지로 이동할 때마다 html 파일을 계속 받아와서 화면에 적용시켜 주었다. 이 방법은 서버의 자원을 많이 차지하는 단점이 있다.

이를 해결해주기 위해 사용된 것이 SPA이다. SPA(Single Page Application)는 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. html 문서를 한 번만 받아와서 바뀌는 부분이나 필요한 부분만 업데이트해서 보여주는 것이다.

라우팅과 리액트 라우터

라우팅(Routing): 웹 어플리케이션에서 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다.
리액트 라우터(React Router): SPA에서 URL을 관리하고 페이지 간의 전환을 쉽게 구현할 수 있다.

리액트 프로젝트가 이미 만들어져 있었기 때문에 리액트 라우터만 설치해주었다.

$ yarn add react-router-dom

위의 명령어를 사용해서 react-router-dom 이라는 라이브러리를 설치했다.

리액트 라우터를 적용하기 위해 src/index.js파일을 다음과 같이 수정해주었다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

사용자의 브라우저 주소 경로에 따라 원하는 컴포넌트를 보여주기 위해서 Route라는 컴포넌트를 통해 라우트를 설정 해줘야 한다.

<Route path="주소규칙" element={보여줄 컴포넌트 jsx}/>

다음은 Link 컴포넌트를 사용해서 다른 페이지로 이동하는 링크를 보여주는 방법이다. Link컴포넌트는 다음과 같이 사용한다.

<Link to="경로">링크 이름</Link>

예시

<div className='menu1'>
  <Link to="/review"><img src={noodle} alt='면 요리'/></Link>
  <p className='food-name'>{menu.noodle.name}</p>
  <p className='price'>{menu.noodle.price}</p>
</div>