React NavLink

단일 페이지 애플리케이션(Single Page Application), 즉 SPA를 만들때 중요한 점은 페이지가 리로드되지 않고 변경이 필요한 부분만 변경되는것인데 HTML의 a href를 이용했을때 단점은 링크를 클릭했을때 웹 페이지가 새로 로딩되는것입니다. 이러한 점을 보완하기 위한 React 컴포넌트가 바로 Link 입니다. 

 

예시

 

function App() {
  return (
    <div>
      <h1>Hello React Router DOM</h1>
      <ul>
        <li><a href='/'>Home</a></li>
        <li><a href='/topics'>Topics</a></li>
        <li><a href='/contact'>Contact</a></li>
      </ul>
      <Switch>
        <Route exact path="/"><Home></Home></Route>
        <Route path="/topics"><Topics></Topics></Route>
        <Route path="/contact"><Contact></Contact></Route>
        <Route path="/">Not Found</Route>
      </Switch>
    </div>
  );
}

 

위 코드의 a href를 클릭하면 원하는 링크로 접속이 되지만 웹 페이지 전체가 새로고침이 되버립니다. 변경이 필요하지 않는 부분까지도 모두 새로고침하는 낭비를 초래합니다. a href 대신 Link 컴포넌트를 사용하면 

 

 

function App() {
  return (
    <div>
      <h1>Hello React Router DOM</h1>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/topics'>Topics</Link></li>
        <li><Link to='/contact'>Contact</Link></li>
      </ul>
      <Switch>
        <Route exact path="/"><Home></Home></Route>
        <Route path="/topics"><Topics></Topics></Route>
        <Route path="/contact"><Contact></Contact></Route>
        <Route path="/">Not Found</Route>
      </Switch>
    </div>
  );
}

 

 

 

 

웹 페이지가 새로고침되지 않고 변경이 필요한 부분만 바뀝니다. HTML a 태그 대신 React Link를 사용하는 방식으로 변경이 필요하지 않은 부분까지 새로 로드하는 낭비를 막고 최적화를 기대할 수 있습니다.

 

 

 

NavLink

 

React Link 컴포넌트중의 하나로 사용법은 Link와 동일합니다. 다른 점은 NavLink는 클릭된 컴포넌트에 class="active"를 붙여줍니다.

붙어진 class="active"를 이용해 CSS를 적용하여 현재 어떤 링크를 클릭했는지 강조할 수 있습니다.

 

예시

 

- index.js

function App() {
  return (
    <div>
      <h1>Hello React Router DOM</h1>
      <ul>
        <li><NavLink exact to='/'>Home</NavLink></li>
        <li><NavLink to='/topics'>Topics</NavLink></li>
        <li><NavLink to='/contact'>Contact</NavLink></li>
      </ul>
      <Switch>
        <Route exact path="/"><Home></Home></Route>
        <Route path="/topics"><Topics></Topics></Route>
        <Route path="/contact"><Contact></Contact></Route>
        <Route path="/">Not Found</Route>
      </Switch>
    </div>
  );
}
 

 

위 코드와 같이 NavLink를 사용하고 

 

- index.css

 

.active {
  background-color: tomato;
  text-decoration: none;
}

 

CSS를 적용하면

 

 

클릭한 NavLink만 강조하는 효과를 넣을 수 있습니다.