[UI 만들기] 3. Top Navbar

 

 

  Navbar 만들기 그중 Top Navbar를 만들어 보고자 한다. Navbar는 메뉴창이기 때문에 당연히 링크기능이 포함돼야 한다. 메뉴 버튼에 따라 페이지가 전환되는 형식을 채택했다. 먼저 Navbar 컴포넌트를 만든다.

import React from 'react';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  )
}

export default Navbar;

 

그리고 상위 컴포넌트에서 불러와 페이지 상단에 위치하도록 코드를 작성한다.

import React from 'react';
import Navbar from './components/Navbar';

function App() {
  return (
    <div>
      <Navbar />
      <h1>Hello World</h1>
    </div>
  )
}

export default App;

그리고 스타일을 지정해 준다.

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

ul {
  display: flex;
  list-style: none;
}

li {
  margin-right: 1rem;
}

a {
  color: #fff;
  text-decoration: none;
}

이렇게만 하면 너무 UI가 단순하기 때문에 약간의 스타일 수정과 로고, 검색창을 넣어본다.

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  bacground-color: #333;
  color: #fff;
  padding: 1rem;
  position: fixed;
  top: 0;
  width: 100%
  z-index: 1;
}

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-right: 1rem;
}

a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.3s ease;
}

a:hover {
  background-color: #555;
}

그리고 로고를 추가해 준다. 간단한 logo image를 준비하고 넣어주면 된다.

function Navbar() {
  return (
    <nav>
      <div>
        <img src={logo} alt="Logo" />
        <span>My App</span>
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  )
}

export default Navbar;

검색 기능도 추가할 수 있다. state를 활용하여 간단한 Input창을 하나 넣어준다.

import React from 'react';
import './Navbar.css';
import logo from '../assets/logo.png';

function Navbar() {
  const [searchText, setSearchText] = useState('')
  
  const handleSearch = (e) => {
    e.preventDefault();
    console.log(`Search for: ${searchText}`);
    // 검색 기능을 여기 추가하면 된다.
  }
  
  return (
    <nav>
      <div>
        <img src={logo} alt="Logo" />
        <span>My App</span>
      </div>
      <form onSubmit={handleSearch}>
        <input type="text" placeholder="Search" value={seachText} onChange={(e) => setSearchText(e.target.value)} />
        <button type="submit">Search</button>
      </form>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  )
}