더블리의 12층

여러개의 메뉴가 있다고 가정해보자. 그 메뉴에서 내가 선택한 메뉴에 특정 스타일을 주고싶다.
사용자는 UI에서 내가 선택한 메뉴가 무엇인지 알아야 하니까! 이때 Link 대신 NavLink를 사용하면 된다.

NavLink는 링크가 활성화되었을때 특정 activeStyle을 사용해 스타일을 입힐 수 있다.

예제코드

• 이전코드는 아래와 같다

<Link activeStyle={activeStyle} to="/locations/gyonggi">
  경기
</Link>

• Link 대신 스타일을 입히기 위해서 NavLink를 사용하면 아래와 같다.

import React from 'react';
import { NavLink, Link, Route } from 'react-router-dom';
import Location from './Location';

const Locations = () => {
  const activeStyle = {
    background: 'red',
    color: 'yellow'
  };

  return (
    <div>
      <h1> 도시 목록 </h1>
      <ul>
        <li>
          <NavLink activeStyle={activeStyle} to="/locations/seoul">
            서울
          </NavLink>
        </li>
        <li>
          <NavLink activeStyle={activeStyle} to="/locations/gyonggi">
            경기
          </NavLink>
        </li>
      </ul>
      <Route
        path="/locations"
        exact={true}
        render={() => <div> 지역을 선택해 주세요. </div>}
      />
      <Route path="/locations/:cityname" component={Location} />
    </div>
  );
};

export default Locations;

Routing 이란?

routing 은 특정 주소에 특정 페이지를 보여주는게 라우팅(Routing)

react-router 사용하기

default로 react는 routing의 기능이 없기 때문에 라우팅 라이브러리를 사용해야 한다. 가장 많이 사용하는 routing library는 react-router

yarn add react-router-dom

프로젝트에 라우터를 적용

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

위 코드에서 아래와 같이 추가

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <BrowserRouter>
    <App />{' '}
  </BrowserRouter>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

두개의 컴포넌트 생성하기

import React from 'react';

const Search = () => {
  return (
    <div>
      <h1>Search</h1>
    </div>
  );
};
export default Search;

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}; 
export default Home;

App.js 를 수정

• app에서 exact={true}를 사용하지 않으면 search로 검색했을때 Home, Search의 두개의 페이지가 화면에 중복으로 표시된다.
• Link를 클릭하면 다른 주소로 이동시켜주는 컴포넌트
• a tag 를 사용하면 화면이 새로고침 된다. (페이지를 렌더링)
• Link 사용하면 페이지 새로고침 하지 않고

import React from 'react';
import { Route, Link } from 'react-router-dom';
import './App.css';

import Home from './components/Home';
import Search from './components/Search';

const App = () => {
  return (
    <div>
      <Link to="/">홈</Link>
      <Link to="/search">검색</Link>
      <Route path="/" component={Home} exact={true}></Route>
      <Route path="/search" component={Search}></Route>
    </div>
  );
};

export default App;