리액트 라우터(React Router) 니 뭔데?

리액트를 사용하다보면 SPA(single page application) 라는 말을 들어봤을거다

안들어봤으면 여기서 간단하게 알고가고 자세하게 알고 싶다고? 구글에 검색 ㄱ 

 

SPA 말 그래도 싱글페이지다 내가 사고 싶은 아이패드가 있어서 상품정보를 클릭했는데 

새로운 페이지로 넘어가서 정보를 보여주지않고 그냥 클릭했던 그 웹페이지에서 해당 정보가 나타는거다 Holy..! 개편함 

근데도 난 이해 ㄴㄴ;;  빡대가리임  그럼 아래 사진에 나와있는 사이트를 들어가봐라 그럼 쉽게 이해 가능 ㄹㅇ  

 

넷플릭스

인스타그램

페이스북(현 메타)

자주 사용해본적 있지 않은가? 없으면 써보셈 

 

그럼 내가 대충 라우터에대해 뭘 설명할라고 하는지  눈치를 챘으면 땡큐고 아니면 지금부터 설명해주겠다

간단하다 라우터는 걍 SPA를 가능하게 해주는 리엑트 HOOK중에 하나다
훅이 뭐냐고 ..? ㅇㅇ 그냥 리엑트에서 여러기능을 쓸수 있게끔 해주는 도구같은거임 (난 그렇게 이해함) 

아 근데 그건 아니지.. 뭔 도구라고 설명해 ..  그럼 고치라고  알려주세요 배움의 자세가 항상 열려있습니다.

 

자 이게 라우터를 쓸수있게 해주는 라우터  방범대다

 

1. BrowserRouter : 라우터를 사용하기 위해 꼭 필요한 지붕같은 존재라고 보면 된다 꼭 이친구 안에다가 Route를 넣어줘야한다

2. Routes : Route 감싸는 비닐이다 그냥 난 그렇게만 이해하고 넘어갔다

3. Route : 이름부터 라우트 이다 이친구가 난 핵심이라고 생각한다.. 그냥 그렇다고...

이 친구한테 다른페이지를 넘어갈수 있는 주소를 입력할수 있다 속성에는 path, element가 들어간다  이렇게 말하면 모르겠지 ?

나도 글쓰면서 잘 설명한건지 모르겠음 그래서 캡쳐떠옴 

이렇게 생김 path값에 다른페이지 이름이 들어가고 , element에 컴포넌트 이름이 들어간다 -끝-

 

4. Link : a 태그 알지 않나? 그냥 리엑트에서 그거랑 똑같은 녀석임 

 

보았느냐 한페이지에서 클릭 몇번으로 다른곳으로 이동한다 Holy