•
React-Router를 이용하는 경우에 다른 경로에 대한 링크는 <Link>를 이용
•
<Link> 를 통한 이동
◦
리액트는 SPA로, 브라우저 주소창을 통해 컴포넌트 출력이 가능
◦
주소창 변경은 애플리케이션 전체 로딩과 처리를 의미
◦
SPA에서는 새 창 열거나 ‘새로고침’을 주의해야 함
◦
React-Router 에서는 <a> 태그 사용을 피해야 함
•
React-Router를 이용하는 경우에 다른 경로에 대한 링크는 <Link> 를 이용
import { Link } from "react-router-dom";
const MainPage = () => {
return (
<div>
<div className="flex">
<Link to={'/about'}>About</Link>
</div>
<div className=" text-3xl">Main Page</div>
</div>
);
}
export default MainPage;
JavaScript
복사
•
<Link>는 리액트 내부에서 컴포넌트 처리.
◦
<Suspense>와 lazy( )로 필요 시점에 컴포넌트 로딩
◦
'/' 경로 접근 시 MainPage만 로딩하여 보여줌.
•
'About'을 클릭하면 AboutPage 컴포넌트만 추가적으로 로딩되는 것을 확인
•
SPA 리액트 애플리케이션의 단점
◦
초기 실행 시간이 오래 걸림
•
해결 방법 : 분할 로딩
◦
<Suspense>와 <Lazy>를 이용한 코드 분할(Code Splitting) 적용.
•
페이지 컴포넌트들의 레이아웃
◦
React-Router를 이용하여 웹 페이지 간 이동처럼 컴포넌트 처리.
◦
<Link> 등으로 브라우저 새로 고침 최소화, 페이지 컴포넌트 간 이동 용이.
◦
공통 레이아웃 템플릿 구성, 메뉴 구조로 재사용 가능한 링크 처리.
•
layouts 폴더를 생성, BasicLayout.js 컴포넌트를 생성
◦
BasicLayout 컴포넌트
▪
상단에 공통 메뉴와 링크, 아래로 페이지 컴포넌트 출력한다.
◦
'children' 속성으로 컴포넌트 내부에 다른 컴포넌트 적용 가능
▪
<nav>와 <div>로 구분하여 작성.