프론트엔드 개발을 하면서 빼놓을 수 없는 필수적인 작업 중 하나는 페이지를 이동하는 기능의 구현이다. 간단하지만 그렇기에 의외로 구현이 복잡하거나 어려운 상황에 직면하기 쉽고, 기능 구현에 사용할 수 있는 수많은 방법들을 구분하는 것도 쉽지 않은 일이다. 이번 글에서는 프론트엔드 개발에서 페이지를 이동하는 여러가지 방법들을 정리하고자 한다.
1. React-Router의 Link 컴포넌트
장점
성능 최적화: 브라우저의 기본 동작을 방해하지 않으면서 내비게이션을 최적화한다.
간결성: 단순히 to 속성에 경로를 지정하는 것만으로 페이지 이동이 가능하다.
단점
유연성 부족: 페이지 이동 전에 추가 로직을 실행하기 어렵다.
스타일링 제한: 기본적으로 앵커a 태그로 렌더링되므로, 특정 스타일이나 동작 적용에 제한이 있을 수 있다.
어떤 상황에서 사용하면 좋은가
간단한 페이지 이동, 특별한 로직이 필요 없는 경우.
코드 예시
import { Link } from 'react-router-dom';
const MyComponent = () => (
<Link to="/about">About Page</Link>
);2. onClick 속성에 함수 사용
장점
유연성: 페이지 이동 전에 추가 로직을 실행할 수 있습니다.
커스터마이즈 가능: 버튼의 스타일이나 동작을 완전히 제어할 수 있습니다.
단점
보일러플레이트 코드: 추가적인 코드 작성이 필요합니다.
React Router와의 통합 부족: URL 업데이트나 상태 관리 기능을 수동으로 관리해야 할 수도 있습니다.
어떤 상황에서 사용하면 좋은가
복잡한 상태 관리나 추가 로직이 필요한 경우.
코드 예시
const MyComponent = ({ history }) => (
<button onClick={() => {
// 추가 로직
history.push('/about');
}}>
About Page
</button>
);3. 프로그래밍 방식의 라우팅 (history.push 또는 history.replace)
장점
직접 제어: 프로그래밍 방식으로 내비게이션을 제어할 수 있습니다.
조건부 이동: 특정 조건이 충족될 때 페이지 이동을 제어할 수 있습니다.
단점
복잡성: history 객체에 대한 이해가 필요합니다.
SPA 특성 무시: 일부 경우 SPA의 장점을 제대로 활용하지 못할 수 있습니다.
적합한 상황
사용자 인터랙션 없이 페이지 이동이 필요할 때, 예를 들어 로그인한 다음 리다이렉트.
코드 예시
const MyComponent = ({ history }) => {
const navigateToAbout = () => {
history.push('/about');
};
return (
<button onClick={navigateToAbout}>About Page</button>
);
};4. Redirect 컴포넌트 (React Router)
장점
자동 리다이렉트: 특정 조건에서 자동으로 다른 경로로 리다이렉트합니다.
단점
유연성 부족: 리다이렉트 로직이 고정적일 수 있습니다.
어떤 상황에서 사용하면 좋은가
접근 권한이 없는 페이지로부터 보호할 때.
코드 예시
import { Redirect } from 'react-router-dom';
const MyComponent = ({ isAuthenticated }) => (
isAuthenticated ? <Redirect to="/dashboard" /> : <Redirect to="/login" />
);5. useNavigate 훅 (React Router v6 이상)
장점
훅 기반의 접근: 함수 컴포넌트에서 쉽게 사용할 수 있습니다.
간결하고 직관적: 코드가 간결하고 이해하기 쉽습니다.
단점
React Router v6 필요: 오래된 프로젝트에서는 사용하기 어려울 수 있습니다.
어떤 상황에서 사용하면 좋은가
함수 컴포넌트에서의 페이지 이동
코드 예시
import { useNavigate } from 'react-router-dom';
const MyComponent = () => {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/about')}>About Page</button>
);
};6. 윈도우 객체의 location 속성 사용
장점
간단함: JavaScript의 기본 기능을 사용하기 때문에 추가 라이브러리가 필요 없습니다.
단점
SPA 특성 무시: 페이지가 완전히 새로 로드되어 SPA의 장점을 잃을 수 있습니다.
어떤 상황에서 사용하면 좋은가
외부 URL로의 리다이렉트나, SPA가 아닌 전통적인 웹페이지에서의 사용.
코드 예시
const MyComponent = () => (
<button onClick={() => window.location.href = 'https://example.com'}>
Visit Example.com
</button>
);