[React] 03. 네비게이션 바 구현

Link

react에서 a태그 대신사용하는 컴포넌트로 불필요한 페이지 리랜더링을 줄인다.
Link를 클릭하면 해당 경로로 이동하게 된다.

App.js에 Route 등록도 필수로 해줘야 연결이 된다.

Link to = "/파일명"
Route path = "/파일명" element= {<컴포넌트명 />}

path : prop은 어떤경로에 대한 설정을 나타냄
element: prop은 해당 경로에 매칭될 때 렌더링할 컴포넌트를 지정한다.

// header.js
<Link to="/login"> 로그인 </Link>

//App.js
<Route path="/login" element={<LoginPage />>}></Route>

NavLink

클릭시 네비게이션의 색상을 변경할때 사용한다.

activeclassname으로 class명을 전달하면 현재 내path가
NavLink의 path와일치하면 해당 class명의 css를 실행한다.

<NavLink activeclassname='active' >  </NavLink>