React 외부라이브러리 설치하는 방법(react-router-dom라이브러리)

react-router-dom

: 가상 돔 만들어주는 라이브러리

 

가상URL 쓰는 이유

 

html 파일은 하나이기때문에 

가상 URL을 만들어야한다.

가상 http url을 정의해서 컴포넌트를 리턴하게 해주는 라이브러리이다

 

react-router-dom라이브러리

주요 4가지 컴포넌트 지원

import { BrowserRouter , Routes , Route , Link } from "react-router-dom";

BrowserRouter : 가상 URL관리 / 브라우저 URL 동기화 컴포넌트
Routes : 가장 적합한 path의 컴포넌트 검토하고 찾는 컴포넌트 [매핑]
Route : 경로를 지정하고 반환한 컴포넌트를 지정하는 곳 , 실제 URL 경로 지정해주는 컴포넌트
Link : 페이지를 갱신하지 않고 랜더링 방식으로 이동할때 사용하는 컴포넌트 / <a>태그와 같은 기능을하지만 차이점이 있다!

---

외부라이브러리 설치방법

 

 

1.https://www.npmjs.com/package/react-router-dom

react-router-dom

 

npm 사이트에 들어가서 검색후 설치할꺼임

react-router-dom 으로 설치 예제.

리액트는 버전이 여러개라 꼭 확인하고 설치 해야한다.

 

npm i router-dom    [ 2.2.11 ]
npm i react-router-dom  [ 6.17.0 ] 수업버전

수업 기준은 하단으로 설치한다

---

 

인텔리제이에서 터미널을 킨다

(기존에 터미널이 켜져있다면 끄고 실행)

리액트 경로를 찾아서 들어간다

(수업기준 경로임)

cd src/main/reactapp

 

---

사이트에서 인스톨 코드를 복사해서 터미널에 입력한다

 

그럼 설치되는데

js 코드 상단에 임폴트 해줘야한다.

 

import { BrowserRouter , Routes , Route , Link } from "react-router-dom"; // npm i react-router-dom 설치후 가능
import 컴포넌트1 from '../day01/1_컴포넌트'     // 다른 폴더에 있는 컴포넌트 호출

export default function 라우터컴포넌트( props ){
    return(<>
        <BrowserRouter> { /*브라우저 라우터 시작*/}
            <Routes>
                { /*http://localhost:3000/day01/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B81*/}
                <Route path='/day01/컴포넌트1' element = { <컴포넌트1/> }/> {/* 컴포넌트로 연결할 가상 url 경로 정의 */}
            </Routes>
        </BrowserRouter> { /*브라우저 라우터 끝*/}
    </>)
}