20. 라우팅과 네비게이션 - 3

네비게이션 기능 추가하기

애플리케이션에서 네비게이션 기능을 추가하는 것은 사용자 경험을 향상시키는 중요한 요소입니다. 이번 글에서는 React 애플리케이션에 네비게이션 기능을 추가하는 방법에 대해 알아보겠습니다.

React Router를 사용한 네비게이션 기능 추가

React Router를 사용하면 쉽게 네비게이션 기능을 추가할 수 있습니다. NavLink나 Link 컴포넌트를 사용하여 페이지 간의 이동을 할 수 있습니다.

// Navigation.js

import React from 'react';
import { NavLink } from 'react-router-dom';

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" exact activeClassName="active">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/products" activeClassName="active">
            Products
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" activeClassName="active">
            About
          </NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

 

위 코드에서는 NavLink 컴포넌트를 사용하여 활성화된 링크에 대해 특정 클래스를 적용하고 있습니다.

// App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navigation from './Navigation';
import Home from './Home';
import Products from './Products';
import About from './About';

const App = () => {
  return (
    <Router>
      <div>
        <Navigation />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/products" component={Products} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

 

위 코드에서는 네비게이션 컴포넌트를 애플리케이션의 상위 컴포넌트에 추가하여 모든 페이지에서 사용할 수 있도록 합니다.

CSS 스타일링

네비게이션에 CSS를 적용하여 시각적으로 보기 좋게 만들어줍니다.

/* styles.css */

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: #333;
}

nav a.active {
  font-weight: bold;
}

마무리

이제 React 애플리케이션에 네비게이션 기능을 추가하는 방법에 대해 알아보았습니다. React Router를 사용하여 페이지 간의 이동을 쉽게 구현할 수 있으며, CSS를 통해 네비게이션을 시각적으로 보기 좋게 꾸밀 수 있습니다. 네비게이션을 추가하여 사용자가 원하는 페이지로 쉽게 이동할 수 있도록 해보세요!