React에서 페이지 전환 시 <a> 태그 사용하지 않는 이유 + 페이지 전환 방법

Next.js 강의 중 라우팅 챕터를 보는데...

Next.js에서 <a> 태그를 이용해서 <Navigation />을 만들었더니

<a> 태그를 이용해서 페이지를 이동하지 말라고 ESLint가 떴다.

React에서 <a> 태그를 이용해 페이지 이동하지 않는 이유와 같다고 했다.

 

생각해 보니 정확한 이유를 모르고 있었다.

막연하게 react-router-dom을 이용해서 <Link /> 컴포넌트를 이용해 페이지 이동을 구현했었다.

창피했다.

제대로 쓰기 위해 열심히 찾아보았다.

⭐️ 페이지 전환 시 <a> 태그를 사용하지 않는 이유는?

1. 페이지 전환의 SPA 장점 상실
   React로 만들어진 앱은 주로 SPA 방식으로 개발되었다. 브라우저의 페이지 전환없이 동적으로 콘텐츠를 보여준다.
   <a> 태그를 사용하면 전체 페이지가 새로고침되므로 SPA 장점 사라진다.
   
   
2. React Router 기능 사용 불가
   React Router를 이용하면 브라우저 히스토리 관리, 코드 분할, 라우팅 등의 기능을 사용할 수 있다.
   <a> 태그를 이용하면 이런 기능 사용할 수 없다.
   
   
3. 컴포넌트 상태 관리 문제
   React는 컴포넌트 기반 라이브러리이며, 컴포넌트 간의 상태를 효과적으로 관리할 수 있다. <a> 태그를 이용하면 React의 상태 관리 능력 활용하지 못 한다.
   
   • 페이지 전환에 따른 새로고침
     - <a> 태그를 사용하면 페이지가 새로고침되기 때문에 컴포넌트의 상태가 초기화된다.
     - 현재 컴포넌트의 상태가 유지되지 않고 다시 렌더링된다.
     - 페이지 새로고침되면 기존의 상태가 손실되므로 항상 페이지 다시 렌더링된다.
   • 컴포넌트 라이프사이클의 호출 문제
     - <a> 태그를 사용하여 페이지를 이동하면 React 컴포넌트의 라이프사이클 메서드가 호출되지 않는다.
     - componentWillUnmount 등의 메서드가 호출되지 않아 정리(clean-up) 작업을 수행하기 어려울 수 있다.
   • React Router의 추가적인 기능 사용 불가
     - URL의 동적 파라미터 처리, 중첩된 라우팅, 라우트 가드 등의 기능을 활용할 수 없다.

⭐️ 페이지 전환 방법

1. <Link /> 컴포넌트 사용하기
   • 브라우저 히스토리를 관리하면서 페이지 전환이 이루어지도록 해준다.
     - 브라우저의 주소 표시줄이 업데이트되고 뒤로가기 및 앞으로가기 버튼을 사용하여 페이지 간 이동이 가능하다는 것을 의미한다.
   • 필요한 리소스만 로드하여 페이지를 업데이트할 수 있다.
     - 전체 페이지를 새로고침하는 것보다 훨씬 빠르게 사용자 경험을 제공할 수 있다.
   • 사용자 상호 작용 없이도 프로그래밍 방식으로 페이지를 전환할 수 있다.
     - 예를 들어, 특정 이벤트나 조건에 따라 특정 페이지로 자동으로 이동하고 싶을 때 사용한다.
   • 코드의 가독성이 향상되고 유지보수가 쉬워진다.
2. history 객체 사용하기
   • React Router는 useHistory 훅을 제공하여 컴포넌트 내에서 history 객체를 직접 사용할 수 있다.
     - history 객체를 사용하면 프로그래밍 방식으로 페이지를 전환할 수 있다.
3. withRouter HOC 사용하기
   • 일반 함수 컴포넌트에서 history, location, 및 match를 props로 받아올 수 있다.
4. Redirect 컴포넌트 사용하기
   • 페이지를 리디렉션할 수 있다.