React - 네비게이션 달기(react-router-dom)

생성한 프로젝트를 보면 index.js 파일이 있다.

 

리액트가 실행이 되면 해당 파일을 실행하는데 해당 파일을 보면 아래와 같이 되어있다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

<App> 코드가 있는데 이 코드는 상단에 import App from './App' 과 매칭이 된다.

 

App.js 파일을 불러오고 있다.

현재 index.js 는 App.js를 불러와 보여지고 있다.

 

그러면 App.js를 확인하기 전에 Screen 폴더를 생성하여 test1.js , test2.js 파일을 만든다.

 

해당 파일의 내용은 아래와 같다.

 

test1.js

import React from 'react';


function TEST1() {
   
   

    return (
        <div>
        test1
        </div>
    );
  }


  export default TEST1;  

test2.js

import React from 'react';


function TEST2() {
   
   

    return (
        <div>
        test2
        </div>
    );
  }


  export default TEST2;  

리액트는 함수형 언어로 함수로 작성을 하고, 화면을 리턴해서 넘겨준다.

 

TEST2 라는 함수를 작성하고 해당 함수는 return 속 html 코드를 리턴한다.

 

export default 를 통해서 외부 파일에서 해당 함수를 사용 가능하다.

 

이제 App.js를 작성하도록 하겠다.

 

react는 리로딩을 하지 않고 변화가 필요한 부분만 렌더링을 하여 기존 페이지 방식보다 빠르다.

 

해당 방식을 하기 위해서 페이지 이동에 router을 사용한다.

 

먼저 npm i react-router-dom -- save 명령어를 입력하여 해당 라이브러리를 설치한다.

 

그 후 App.js를 아래와 같이 작성한다.

import React from 'react';
import  TEST from './Screen/test1'
import  TEST2 from './Screen/test2'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <nav class="borderBox_b">
          <ul>
            <li>
              <Link to="/test1">test1</Link>
            </li>
            <li>
              <Link to="/test2">test2</Link>
            </li>
          </ul>
        </nav>

        {/* <Switch>는 하위 <Route>들을 살펴보고 현재 URL과 일치하는 첫 번째 경로를 렌더링합니다. */}
        <Switch>
          <Route path="/test1">
            <TEST />
          </Route>
          <Route path="/test2">
            <TEST2 />
          </Route>

         
        </Switch>
      </div>
    </Router>
  );
}


export default App;

먼저 App 함수의 리턴에는 <Router></Router>을 사용한다.

 

해당 라우터 태그는 리액트의 url이 바뀔시 해당 url에 맞게 화면을 렌더링 해준다.

 

<Link to="/test"></Link> 는 to에 명시 된 경로로 url을 변경 해준다.

 

 <nav class="borderBox_b">
          <ul>
            <li>
              <Link to="/test1">test1</Link>
            </li>
            <li>
              <Link to="/test2">test2</Link>
            </li>
          </ul>
 </nav>

위 코드에서 test1을 클릭시 페이지 이동 없이 주소창이 localhost:3000/test1 로 변경된다.

 

이제 각 url에 맞게 렌더링 해줄 파일을 설정해야 한다.

 

이 역할을 해주는 것이 Switch 이다

 

<Switch>
       <Route path="/test1">
          <TEST />
       </Route>
       <Route path="/test2">
          <TEST2 />
       </Route>
 </Switch>

switch 태그로 감싸고 route 태그를 위 처럼 써서 경로 별 화면을 지정 가능하다.

 

먼저 <Route path="/test1"> 이렇게 path를 지정하면 해당 url 로 변경시 Route 태그 사이에 있는 

 

<TEST /> 가 렌더링 되어 화면에 보이게 된다.

 

해당 TEST는 상단에 import 를 통해서 어떤 파일을 사용할지 정해줘야한다.

 

import  TEST from './Screen/test1'

위 처럼 test2 의 경로도 설정하면 localhost:3000/test2 로 변경시 test2.js 가 렌더링 된다.