React , [react-router-dom]Router / Routes / Route 에 대해 알아보자

라우팅에 대해 알아보자.

 

라우팅이란

경로를 지정하는 과정.

 

페이지 라우팅이란 

요청에 따라 적절한 경로를 반환하여 페이지를 이동하는 과정을 말한다.

 

업무적인 방식의 차이로 나눈다면 ,

SSR 방식 (서버가 만들때) 과 CSR 방식 (클라이언트가 만들때)

우리는 리액트를 이용하고 고객의 클릭에 의해 화면 조정이 되기때문에 CSR 방식이다.

CSR 은 처음 로드시에 모든 페이지에 관련된 코드들이 들어와야해서 느리지만.

추후에 가지고 있는 코드들을 그때그때 호출하기 때문에 화면 전환에 훨씬 빠르다는 장점이 있다.

 

사용자가 요청하는 url에 해당하는 페이지가 이동하는 것처럼 보이지만,

전체적인 컴포넌트가 교체가 되는 것이다.

웹 애플리케이션에서 사용ㅈ가 다른 웹페이지로 이동하거나 

다른 뷰로 전환하는 것을 관리하는 프로세스를 라우팅이라 한다.

 

 

리액터 라우터란 , url의 주소를 감지하는 역할을 한다.

url에 맞추어 컴포넌트를 펼치는 라이브러리.

사용자가 페이지 간 이동이 가능케 한다.

 

최상위 컴포넌트 <BrowserRouter>,<HashRouter> 하위로 여러 page를 묶을 수 있다.

 

BrowserRouter 란 .

 

라우팅을 위한 최상위 레벨의 컴포넌트로 , 

일반적으로 최상위 레벨인 index.js 에서 설정하는것이 간단하고 일반적이나

복잡한 애플리케이션 구조에서는 app.js 에서 라우팅이 필요한 부분에 설정한다.

 

 

Routes 란

다중 Route 들을 그룹화 시키는 부모 컨테이너로써

규칙이 일치하는 하나의 라우터만 랜더링 하도록 하는 역할.

하나의 Route 라도 반드시 Routes 로 묶어야 하는 문법적 규칙이 적용된다.

다중 Routes 구성을 통해 다중 라우팅도 가능하지만,

이때 다중 라우팅 되는 대상 Route는 path에 동일 경로 지정을 통해 다중 경로 설정이 가능.

그러나 라우팅 되는 서로 다른 대상의 라우팅 경로가 동일 할 수 없으므로 ,

둘중 하나를 * 나 /* 로 지정함으로 둘 다 매칭시켜 다중 라우팅이 가능하다.

 

 

Route 란 ?

<Route path="/" Component={Main} ></Route>
<Route path="/Product1" Component={Product1}></Route>
<Route path="/Product2" Component={Product2}></Route>

 

Route 컴포넌트의 역할

1. 특정 url 경로와 연결된 라우팅 룰을 정의.

2. path 를 사용하여 url 경로를 지정

3. 해당 경로에 일치하는 경우 어떤 컴포넌트를 랜더링 할지 정의함.

 

path="" : 링크에 연결한 페이지 경로 명시.

현재 url 과 일치 시킬 경로를 정의하는 역할.

path 의 문자열 경로가 url 과 일치할 경우 해당되는  컴포넌트 또는 엘리멘트 가 랜더링.

/ 는 루트 페이지를 의미한다.

문자열 또는 * 로 사용을 정의한다.

 

Componet = {} : url 경로를 통해 실제 로드될 컴포넌트 명시.

Componet 는 구버젼에 사용되던 속성이고 ,

현재는 element 속성이 사용되고 있다.

element 속성은 컴포넌트 형태로 표현이 가능한데 ,

프롭스의 전달 또는 HTML 요소도 직접 전달이 가능하다.

즉 , return 의 형태를 띄고 있다.

 

element={}

element 속성을 이용하면 , 라우트를 대상을 컴포넌트 형태로 지정해야한다.

별도의 프롭스 전달된 예를 살펴보자.

<Route path="/" element={<Main />} ></Route>
<Route path="/Product1" element={<Product1 helpText={helpText} />}></Route>
<Route path="/Product2" element={<Product2 helpText={helpText} />}></Route>

직접적으로 HTML 요소 입력도 가능하다.

<Route path="/Help" element={<div>{helpText}</div>} ></Route>

 

 

url 의 오류 처리

<Route path="*" Component={NotFound}></Route>

일치하는 라우터가 아닌 경우 잘못된 url 을 입력했을 경우 처리할 컴포넌트를 명시한다.

Route 는 url 에 대한 일치로 작동하니 , 

이외의 모든 처리만 해주면 되는 원리.

 

 

Route 와 링크 연결.
Link to =""

 

import { Link } from 'react-router-dom';

function Main() {
    return (
        <>
            <h3>메인</h3>
            <ul>
                <li><Link to="/Product1">1번상품</Link></li>
                <li><Link to="/Product2">2번상품</Link></li>
            </ul>
        </>
    );
};

react-router-dom 에서 import 후 사용.<- 아래 설치방법 기술됨.

 

우리가 정한 url 의 주소와 동일하게 설정한다.

link 의 종류는 다음번에 조금더 자세히 설명하겠다.

일단은 HTML의 a링크 와 비슷하다 라고 생각해 놓자 .(자세히 보면 분명 다르다.)

 

 

 

프로젝트 내부 터미널에서 라우터 설치방법

npm install react-router-dom

 

 

 

index.js.

import {BrowserRouter , HashRouter} from 'react-router-dom’

 

1 ) indexjs.에서 .BrowserRouter 컴포넌트적용

root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    
);

2.프로젝트 src에 폴더 생성과 페이지로 이용될 컴포넌트 형성

3.app에서의 준비

import Home from './pages/Home.jsx';
import Contact from './pages/Contact.jsx';
import Topics from './pages/Topics.jsx';

function App() {
  console.log('app 랜더링');

  

   return (
    <div>
    <h2> React Router DOM Text</h2>
    <p>라우터 적용 전</p>
    <Home />
    <Topics />
    <Contact />
    </div>
  );
}

export default App;

 

4.하위 컴포넌트의 제작

const Home = ()=>{
    console.log('여기는 home 컴포넌트');
    return(
        <>
            <hr style={{borderColor:'green', width:'150px'}} />
            <h2>
                home...
            </h2>
            home(<span style={{color:'green'}}>green</span>)
            <hr style={{borderColor:'green', width:'150px'}} />
        </>
    )
};

export default Home;

라우트 적용전에는 하위컴포넌트들이 나열되는 것들을 볼 수 있다.

 

라우터를 활용하여 링크거는 법은 

3가지를 통해 살펴보겠다.

1. a href 를 통한 방법 

2. Link to 를 이용한 방법

3. NavLink 를 이용한방법 . 

 

글이 길어짐으로 다음 게시물에 정리해보겠다.

 

추후에 이런거 할거에요 ! (NavLink 미리보기..)