React실전5 라우터-navigate, nested routes, outlet

컴포넌트 파일 관리하기

src 폴더 안에다 컴포넌트 파일 만들면 된다. ex. Detail.js

• 컴포넌트 파일 만들 때

function Detail (){
	return(
		// 이 안에 html 작성
	)
}

• 하는 것 잊지 말기!

그리고 이 컴포넌트를 다른 파일에 가져다 쓰고 싶다 하면

export default Detail; 

하면 다른 곳에서 이걸 가져다 쓸 수 있겠지.

그리고 이걸 가져다 쓰고 싶은 곳 페이지에 가서 (ex. App.js) 맨 위에

import Detail from './Detail.js'

해주면 되겠지.

이렇게 import 를 해 오고 밑에 가서 진짜 가져다 쓸 곳에 가서 가져다 쓰면 된다. ex. <Route path=“/” element={<Detail />} />

참고사항 하나: 리액트에서의 폴더구조.

어차피 js파일밖에 없음. 비슷한 파일끼리 폴더로 묶는게 끝.

이분은 src 폴더 안에 routes 라는 폴더를 만듦. 여기에 페이지 기능을 하는 컴포넌트들 페이지.js 들을 다 모아놓음.

일반 컴포넌트 파일들은 components 폴더를 만들어서 거기에 집어넣든가 하면 된다.

경로가 수정이 되었으니까 import하는 경로도 다시 수정해줄 것. ` ‘./routes/Detail.js’` 이렇게

routes 말고 pages 라고 작명하는게 더 직관적일 듯.

오늘 새로 배울 것

리액트 라우터 2 : navigate, nested routes, outlet

‘react-router-dom’이라는 라이브러리에서 새로운것들은 더 import 해보자.

useNavigate, Outlet

1. useNavigate(): 페이지 이동 도와주는 언제쓰냐,

useNavigate(); 라는 hook(훅)을 가져다 쓸 수 있는데, 이건 useState, useNavigate 같이 use어쩌구 시작하는것들은 hook 이다. hook 이 뭐냐면 유용한것들이 들어있는 함수같은 것이다. 그래서 useNavigate();안에도 유용한 정보들이 들어있는데, 이 안에는 함수 하나가 들어있다. 페이지 이동을 도와주는 함수. 그래서 이걸 보통 변수로 저장해서 쓰는것이 일반적이다.

let navigate = useNavigate();

404 페이지 만드는 법

• : 위에 만들어놓은 라우트 외의 모든 것을 뜻한다. ```js

<Route path=“*” element={<>없는페이지입니다.<>} />

#### Nested Routes
nested: 태그 안에 태그가 들어간 것
```js
<Route>
	<Route />
	<Route />
<Routes/>

두번째장점: nested route 접속시엔 element가 2개 보임.

<Outlet><Outlet/> 어디에 보여줄지 정하려면 쓸 태그

그래서 이거 언제 씀?

• 여러 유사한 페이지 필요할 때

라우터로 페이지 만들면

1. 뒤로가기 버튼 이용 가능
2. 페이지 이동이 쉬움(UI 스위치 조작 쉬움)