[React] Link 컴포넌트

 

Link 컴포넌트란?

Link 컴포넌트는 리액트에서 사용하는 페이지 이동을 하기 위한 컴포넌트이다.

우리는 리액트를 접하기 html 을 이용하여 태그를 만들었다.

HTML 에서는 a 태그를 이용하여 페이지 이동을 했는데 왜 굳이 Link 컴포넌트가 있을까?

 

Link 컴포넌트와 a태그의 차이

Link 컴포넌트를 이용하면 페이지가 새로고침이 되지 않고 자연스럽게 페이지를 이동할 수 있고 더 빠르다.

이러한 특징으로 마치 어플을 사용하는 느낌을 준다.

 

반면에 a 태그를 이용하여 새로고침이 되면서 페이지를 이동하기 떄문에 페이지 이동이 느리며 끊기는 듯한 느낌을 준다.

사용자 입장에서는 Link 컴포넌트가 사용하는데 있어서 더 편리함을 느낄 것이다.

그럼 이제 Link 컴포넌트를 어떻게 쓰는지 알아보자.

 

Link 컴포넌트 사용방법

1. 먼저 react-router-dom 라이브러리를 설치하자

npm i react-router-dom

 

react-router-dom : React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 하는 라이브러리

 

2. index.js에 BrowserRouter 컴포넌트를 import 해서 App 컴포넌트에 감싼다.

index.js

3. App.js 에 Routes, Route 컴포넌트를 import 하고 다음과 같이 Route컴포넌트를 Routes 컴포넌트로 감싼다.

<Route path="/" element={<Main />} />
path : 해당 라우트면 element 를 보여주겠다.
element : 보여줄 컴포넌트 설정

 

3. Main.jsx 에 Link 컴포넌트를 import 하고 다음과 같이 작성한다.

좌 : Main.jsx / 우 : Form.jsx

<Link to={"/form"}>form으로 이동</Link>
to : 해당 라우트로 이동
해당 컴포넌트를 클릭하면 페이지 이동한다.

 

Test 결과

클릭하면 새로고침 없이 form.jsx 로 넘어가는 것을 확인 할 수 있다.