리액트 스터디 14탄) useNavigate, Outlet, NavLink

리액트를 다루는 기술을 참고하여 기술하였습니다.

---

useNaviagete()

navigate의 사용방법은 다음과 같다.

const naviagte= useNavigate();
이후 navigate()를 이용해서 이동할수 있다. 

예를들어 
<Nav.Link onClick={()=>{navigate(1)}}>Home</Nav.Link>

onClick={()⇒{naviagte(’http::// 어쩌고저쪼고 이동할 주소’)}

• 1은 앞으로 한페이지

• -1은 뒤로가기 이다.

즉 현재 존재하는 버튼이나 글에다가 다양하게 이동할때, 동작하는 함수를 만들기 위해서 useNaviagte를 사용한다.

404페이지 만들기

404페이지는 오류 페이지를 의미한다.

Route path="*"
*은 이외에 모든 페이지를 의미한다.
즉 없는 페이지를 접속하게 되면 없는페이자고 하면된다.

Nested Routes(중첩된 라우트)

만약 현재 라우트 위치에 더 연결해주는것이다.

<Route path="/path1" element={<about/>}>
	<Route path="member" element={<about2/>}/>
	<Route path="name" element={<about3/>}/>
</Route>

이처럼

path1

path1/member

path1/name

으로 접속하면 뒤에 element를 표현할수 있게 한다.

그런데 nested routes를 사용하게 되면, 예를들어

/path1/member로 보여주면, <about>과 <about2>를 다 보여준다.

하지만 이런 경우에는 <about>안에 <about2>를 표현하게 되는데 그때 어디에 표현해줄지 를 입력해줘야한다.

그때 필요한것이 Outlet이다.

outlet

nasted routes 하게 되면 상위 라우터에 하위라우트를 동시에 표현할수 있게 된다.

즉, 위에경우에서는 path1에 member까지 표현할수 있게 되는것, 그렇게 되면

about에 about2가 표현되게 되는데, 이 위치를 정해주는것이 outlet이다.

그래서 작성을 하게되면,

function about(){
return(
	<>
		<h4>회사정보</h4>
		<Outlet></Outlet>
	</>
)}

즉 이게

function about(){
return(
<>
	<h4>회사정보</h4>
	<h4>멤버이름</h4>
</>
)};
처럼 표현될 것이다.

function about2(){
return(
	<>
		<h4>멤버이름</h4>
	</>
)}

이렇게 두개의 컴포넌트 들을 만들었을때, nasted route를 이용해서 about안에 about2가 존재할때, 저 <outlet>태그가 존재하는 위치에 하위 route즉, about2가 표현된다.

이러한 Outlet기능은 언제 사용하게 되는가?

👉

공통적으로 보여줘야 하는 레이아웃이 존재할때 사용하면 유용함.

NavLink

NavLink는 컴포넌트의 종류로 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS클래스를 적용하는 컴포넌트이다.

이렇게 Link에 스타일을 넣어줄수 있는 Link를 NavLink라고 한다.

이 NavLink가 활성화 되려면, 한가지 조건이 만족되야하는데

그 조건은

👉

현재 url과 NavLink의 to가 가리키는 링크가 일치 할때

NavLink는 활성화 된다.

좀더 단순하게 이해하자면, 동일한 페이지에서 NavLink가 눌려서 어떠한 페이지를 보여준다면, NavLink가 활성화 되는것이다.

• v6에서는activeStyle, activeClassName속성이 없어졌다.

• 따라서 isActive를 선언하여 활성화 시키고 싶은 스타일의 css를 적용할수 있다.

현재 페이지를 Profile이라고 했을때

import React from "react";
import {NavLink, Route, Routes} from "react-router-dom";
import Profile from "./Profile";

const Profiles=()=>{
return (
	<>
		<h3>사용자 목록</h3>
		<ul>
			<li>
				<NavLink to ="/Profile/ycLee" style={({isActive})=>({color: isActive ? 'red' : 'blue'})}>ycLee</NavLink>
			</li>
		</ul>
	</>
)}
export default Profiles;

이렇게 작성을 했을시, NavLink의 to 의 값은 profile/ycLee이기 때문에 Profile과 동일한 주소를 가지게 되고, 누르게 되면 style이 isActive= ture이므로 삼항연산자에 의해서 빨간색으로 변하게 된다.

Uploaded by N2T