[❓]React 렌더링 방식 비교

❓React에서 사용할 수 있는 렌더링 방식 - useNavigate, a 태그, Link 태그, NavLink 태그들을 비교 정리하였다.

1️⃣React 렌더링 방식

1️⃣-1️⃣useNavigate

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

function LoginButton() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 로그인 로직 처리 후
    navigate('/dashboard');  // 프로그래밍으로 이동
  };

  return <button onClick={handleLogin}>로그인</button>;
}

🔸버튼 클릭, 조건부 분기 등 동적 이동

1️⃣-2️⃣a 태그

<a href="/about">About</a>

🔸전체 페이지 새로고침
🔸외부 링크나 초기 앱 로딩에 적합
🚫a 태그는 브라우저 전체를 새로고침해서 페이지를 로딩하기 때문에 사용 시 앱이 초기화된다 -> 사용 자제하는 것이 좋다.

1️⃣-3️⃣Link 태그

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

<Link to="/about">About</Link>

🔸브라우저의 주소는 바뀌지만 전체 페이지는 리로드되지 않음
🔸페이지 이동 버튼, 네비게이션

1️⃣-4️⃣NavLink 태그

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

<NavLink
  to="/about"
  className={({ isActive }) =>
    isActive ? "text-blue-500 font-bold" : "text-gray-600"
  }
>
  About
</NavLink>

🔸Link태그처럼 이동 기능은 동일
🔸현재 경로와 일치하면 isActive나 activeClassName을 통해 스타일 적용 가능
🔸탭, 메뉴바, 사이드바 등 현재 위치 강조해야 할 때

2️⃣비교