a태그와 Link태그의 차이점

 

a태그를 통해 이동하는 것은

서버에 새로운 요청을 전송한다.

(새로운 http 요청을 서버에 전송)

⇒ SPA의 장점이 사라짐.

모든 코드를 다시 로드한다.

그래서 성능에 안좋은 영향을 끼침.

 

Link 사용 장점

: 요청을 전송하는 기본 설정을 막고,

리액트 라우터가 새 URL을 알고,

그 URL에 맞는 적절한 요소를 로딩하도록 해줌.

 

사용법

• import

import { Link } from "react-router-dom";

• 기존 a태그

import { Link } from "react-router-dom";

function HomePage() {
  return (
    <>
      <h1>My Home Page</h1>
      <p>Go to <a href="/products">the list of products</a></p>
    </>
  );
};

export default HomePage;

• Router의 Link태그

import { Link } from "react-router-dom";

function HomePage() {
  return (
    <>
      <h1>My Home Page</h1>
      <p>Go to <Link to="/products">the list of products</Link></p>
    </>
  );
};

export default HomePage;

 

링크 클릭했을 때 HTTP 요청을 전송하는 브라우저 기본 설정을 막아줌.

 

• 이제 이런 Link태그에 스타일을 지정하고 싶다면 어떻게 할까?

: 기본적으로 Link태그는 a태그라고 생각하면 편하다

즉, a태그에 스타일링을 해주면 된다.

 

• 이제 Link태그에 활성화 상태를 스타일하고 싶다면 어떻게 할까?

 

이렇게 내가 홈 화면에 있으면 Home에 밑줄이 쳐 있는 상태처럼 말이다.

: 이것은 Link를 NavLink 로 바꾸고

NavLink에 className 프로퍼티를 추가해주면 된다.

className프로퍼티에는 콜백 함수를 전달하고 콜백함수의 매개변수에는 {isActive}라는 react-router-dom 전용 객체를 전달해준다.

참고로 isActive는 불리언값이다.

ex

<NavLink
  to="/"
  className={({isActive}) =>
    isActive ? classes.active : undefined
  }
>
  Home
</NavLink>

 

• 그리고 현재 상태는 /로 시작하면 무조건 Home 이 활성화 되도록 되어있다.

하지만 우리는 Home 화면인 / 일때만 활성화 하고 싶다.

그렇다면 end 프로퍼티를 추가해주면 된다.

그러면 / 일때만 활성화를 해주게 된다.

<NavLink
  to="/"
  className={({isActive}) =>
    isActive ? classes.active : undefined
  }
	end
>
  Home
</NavLink>