마이 블로그 프로젝트 03 - 메뉴 바.

내 프로젝트에서 메인 페이지를 비롯하여 각 구성 요소들을 이동하는 역할은 상단 메뉴바에서 담당하고 있다. 기능 수행 이후 페이지가 이동되는 경우가 있지만 사용자가 원하는 데로 이동하는 것은 오직 상단 메뉴바에서만 가능하다.

<div className={[styles.titlebutton, styles.centeralignment].join(' ')}>
	<Link to='/'><p className={styles.menutext}>Lee's Blog</p></Link>
</div>

<div className={[styles.menubutton, styles.centeralignment].join(' ')}>
	<Link to='/questions'><p className={styles.menutext}>공부기록</p></Link>
	<Link to='/studyrecord'><p className={styles.menutext}>내용정리</p></Link>
	<div onClick={onMove}><p className={styles.menutext}>포트폴리오</p></div>
</div>

HTML에서는 페이지 이동에 a 태그를 사용했지만 리액트에서는 a 태그를 Link 컴포넌트로 대체하여 사용하도록 하고 있다. App.js에서 Route 컴포넌트로 url에 따라 어떤 컴포넌트가 렌더링 되는지 연결해두었으니, 여기서는 거기에 맞춰 Link 컴포넌트에 올바른 url을 작성해주기만 하면 페이지 이동 기능을 구현할 수 있다.

• a 태그와 Link 컴포넌트.
  a 태그는 새로운 페이지를 이동할 때 반드시 새로고침을 발생시킨다. 그런데 페이지가 최초 한 번만 로딩되면 그 이후에는 동적으로 데이터를 관리하면서 필요한 부분만 '리렌더링'하는 리액트에서는 a 태그를 그대로 사용할 수가 없다. 그래서 Link 컴포넌트로 a 태그를 대체하게 만든 것이다.