라우팅처리

 

브라우저 url이 바뀔때마다 보여줄 컴포넌트를 맵핑 시켜서 우리에게 보여주는것을 라우팅 처리 라고 한다.

 

리액트에서 라우팅 처리를 하려면 추가적으로 모듈을 설치해야한다.

 

터미널을 하나 더 연다음에 모듈을 설치해준다.

 

npm install react-router-dom@<버전입력>

 

 

그럼 package.json에 react-router-dom이 추가된 것을 볼 수 있다. 

---

그럼 이제 라우팅 기능을 만들어보쟈ㅑㅑ

라우팅 기능을 하기 위해 About.js 파일도 하나 삭 만들어준다.

 

 

먼저 index.js에 BrowserRouter를 import 해준다.

'react-router-dom'에서 BrowserRouter를 가져오는데,

브라우저 라우터는 리액트에서 웹브라우저 라우팅을 처리할때 가장 보편적인 라우터라고 한다..!

 

그리고 App.js에서 라우터를 사용해야 하니까 BrowserRouter태그 사이에 App 태그를 넣어준다.

 

App.js에서 { Routes, Route, Link } 를 import  해준다.

'react-router-dom'에서 Routes, Route, Link를 가져온다.

 

Link태그는 사용하면 최종적으로 html dom에서는 a태그로 나온다!

 

Link태그의 to 속성에는 브라우저에서 접근할 주소를 적어준다.

Link태그를 클릭하면 해당 컴포넌트가 보여야하는데, 이 컴포넌트를 보여줄 위치가 바로 Routes이다!!

 

브라우저 패스가 바뀔때마다 어떤 컴포넌트를 맵핑해서 보여줄지 Routes 태그안에 정의해서 보여줘야한다.Routes는 Route의 묶음이라고 생각하면 된다.

 

<정리>

Link태그의 to와 똑같은 주소를 가진 놈을 Route태그의 path에서 찾는다!

찾으면 그 놈의 element에 적혀있는 컴포넌트로 맵핑시켜서 화면에 보여준다~~~

---

 

vscode에서 터미널을 이렇게 여러개 열수있는지 처음알았따..!!

 

+ 함수형 컴포넌트를 화살표 함수를 이용해서 만들어도 된다..!