ReactJS에서 게시판이 있는 끈적끈적한 탐색 표시줄 만들기

📌 소개하다.

인터넷 접속량 증가와 코로나 여파로 온라인 쇼핑을 즐기는 사람이 지난해 점차 늘고 있다.이런 상황으로 인해 전자상거래 사이트의 개발 수요가 상승세를 보이고 있다. 아래 그림에서 보듯이 Google Trends.
그림 1-Trend of "E-Commerce Website" term by Google Trends
그래서 나는 전자상거래 응용에서 자주 사용하는 두 가지 구성 요소에 관한 글을 쓰기로 결정했다.게시판과 끈적임(또는 고정) 내비게이션 표시줄.그 밖에 투명한 배경의 내비게이션 표시줄도 사용할 계획이다. 이것은 현재 특히 유행하고 있다.

💻 손대다

시작하기 전에 본고는 게시판이 있는 점성 내비게이션 표시줄을 어떻게 만드는지 주목하고자 합니다.본문에 기반한 원본 코드는 아래의 Github 링크에서 찾을 수 있습니다.나는 모든 절차를 상세하게 설명할 것이다. 마지막으로, 우리의react 응용 프로그램은 this. 처럼 보일 것이다. 진일보한 문제에 대해, 나는 평론 부분에서 대답을 시도할 것이다.

다무라 / 게시 탐색 모음 반응

게시판과 끈적끈적한 내비게이션 막대는 Sass와 ReactJS가 완성했다.

첫 번째 단계:react 응용 프로그램 만들기

create react app를 사용하여 새로운react 프로그램을 만듭니다.

⚠️ Before starting, Node.js has to be installed on your computer.

# create a folder named "tutorial"
mkdir tutorial 

# change current directory to the folder "tutorial"
cd tutorial

# create a react app named "announcementbar-and-navbar"
npx create-react-app announcementbar-and-navbar

ℹ️ Are you new to create-react-app? You can get start from here.

📦 2단계: 노드 패키지

프로젝트에서 사용하는 가방은 완전히 선택할 수 있지만, 모든 절차를 가지고 있다고 가정하면 설명합니다.따라서 사용하는 것이 좋다.
Sass css 확장 언어로 사용합니다.나는 4.13.1 버전에서 사용하는 것을 더욱 좋아한다LibSass.노드 패키지를 추가하려면 yarn 및 npm 명령을 사용합니다.

# add in yarn
yarn add [email protected]

# add in npm
npm install [email protected] --save

우리가 추가하고자 하는 두 번째 패키지는 classnames입니다. 이것은 JS 실용 프로그램으로 클래스 이름을 조건부로 연결할 수 있습니다.

# add in yarn
yarn add classnames

# add in npm
npm install classnames --save

⚠️ After adding the packages, run the project to check if everything is okay.

# run in yarn
yarn start

# run in npm
npm start

다음과 같은 페이지를 보아야 합니다.

📝 3단계: 폴더 구조 만들기

이 프로젝트를 단순화하려면 다음과 같은 폴더 구조를 사용합니다.

src
   |-- components
   |   |-- announcement
   |   |   |-- announcement.component.jsx
   |   |   |-- announcement.styles.scss
   |   |
   |   |-- navbar
   |   |   |-- navbar.component.jsx
   |   |   |-- navbar.styles.scss
   |
   |-- App.jsx   
   |-- App.scss
   |-- App.test.js
   |-- index.css
   |-- index.js
   |-- logo.svg
   |-- reportWebVitals.js
   |-- setupTests.js

이 폴더 구조 가져오기;

1. Change App.css to App.scss and App.js to App.jsx. Fix the import in App.jsx as import './App.scss'

2. Add a folder named components to put our components in it.

3. Create announcement and navbar folders under the components folder.

4. Add announcement.component.jsx and announcement.styles.scss under announcement folder.

5. Add navbar.component.jsx and navbar.styles.scss under navbar folder.

💄 4. 메이크업

이 절차를 마치면 색인을 엽니다.css 파일을 다음 줄로 변경합니다.그 색인을 잊지 마라.css는 전역 범위를 가지고 있기 때문에 모든 구성 요소가 접근할 수 있습니다.

/* Line 1 */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
/* Line 11 */

a {
  color: black;
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}

색인css

ℹ️ To understand the lines between 1 to 11 please take a look at universal box sizing with inheritance.

ℹ️ If we add an elements to the DOM, links' color will be black and on hover event, their opacity will be changed by the help of the css we wrote. Also, they won't have underline.

🛠 5단계: 구성 요소 시작

응용 프로그램부터 시작합시다.jsx, 그리고 도중에 다른 구성 요소를 깊이 이해합니다.우선, 나는 전체 페이지를 채우는 용기를 만들 것이다.

// import the style file
import "./App.scss";

export default function App() {
  // add a div with a container class
  return (
      <div className="container"></div>
  );
}

응용 프로그램.jsx

.container {
  min-height: 100vh;
  background-color: bisque;
}

응용 프로그램.scss
결과는 다음과 같습니다.

페이지 상단에 게시판을 추가하려면 게시 구성 요소를 만들어야 합니다.

// import the style file
import "./announcement.styles.scss";

// create a Announcement component with a children prop parameter
export default function Announcement({ children }) {
  return <div className="announcement-bar-container">{children}</div>;
}

공고구성 요소jsx

.announcement-bar-container {
  background-color: #2c2e2f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 1.5rem;

  /* because of the dark background, the color changed to white */
  a {
    color: white;
    line-height: 30px;
  }
}

공고풍격scss

ℹ️ Flexbox is used to set the layout of announcement bar.

ℹ️ Parent of the announcement, which is App component in this case, will pass the children of it as a prop. Take a 👀

이제 프로그램 구성 요소에 공고 구성 요소를 적용합니다.

// import Announcement component
import Announcement from "./components/announcement/announcement.component";
import "./App.scss";

export default function App() {
  // add Announcement component with children
  return (
    <div className="container">
      <Announcement>
        <a href="mailto:[email protected]">[email protected]</a>
        <a href="tel:+902122222222">+90 (212) 222 22 22</a>
      </Announcement>
    </div>
  );
}

응용 프로그램.jsx
응용 프로그램은 다음과 같습니다.

🧗🏼‍♀️ 6단계: 탐색 모음 구성 요소의 원활한 시작

처음에 우리의 내비게이션 표시줄은 고정된 것도 투명한 배경도 없었다.우리는 그것을 더 잘 이해할 수 있도록 점차적으로 그것들을 추가할 것이다.6단계가 끝나면 탐색 모음 구성 요소는 다음과 같습니다.

그래서 저는 우리의 요소에 대해 다음과 같은 계획을 했습니다.

현재, 우리는 위에서 계획한 요소를 Navbar 구성 요소에 실현해야 한다.

import "./navbar.styles.scss";

import logo from "./logo.svg";

export default function Navbar() {
  return (
    <nav className="navbar-container">
      <div className="link-container link-container__left">
        <a href="/">test</a>
        <a href="/">test</a>
        <a href="/">test</a>
      </div>
      <img src={logo} className="logo" alt="logo" width={150} height={75} />
      <div className="link-container link-container__right">
        <a href="/">test</a>
        <a href="/">test</a>
        <a href="/">test</a>
      </div>
    </nav>
  );
}

탐색 모음.구성 요소jsx

/* simple mixin to add white background to class  */
@mixin white-bg {
  background-color: white;
  -webkit-box-shadow: 0 4px 8px -8px black;
  -moz-box-shadow: 0 4px 8px -8px black;
  box-shadow: 0 4px 8px -8px black;
}

/* Flexbox is used for the layout.
 * top is calculated as ( (# of announcement component) * ( height of announcement component) )
 */
.navbar-container {
  @include white-bg;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 1.5rem 10px 1.5rem;
  align-items: center;
  z-index: 9;
  top: calc(1 * (0.4rem + 30px));
  width: 100%;

  .logo {
    &:hover {
      opacity: 0.7;
    }
  }

  .link-container {
    width: 33vw;
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
      font-weight: 600;

      &:hover {
        opacity: 0.7;
      }
    }

    &__left {
      padding-right: 3rem;
    }

    &__right {
      padding-left: 3rem;
    }
  }
}

탐색 모음.풍격scss
다음으로, Navbar 구성 요소가 App 구성 요소에 추가될 때 아래 코드와 같이 이 단계의 시작 이미지와 동일한 결과를 얻을 수 있습니다.페이지에서 아래로 스크롤할 수 있는 다른 용기도 추가했습니다.

import Announcement from "./components/announcement/announcement.component";
import "./App.scss";
import Navbar from "./components/navbar/navbar.component";

export default function App() {
  return (
    <>
      <div className="container">
        <Announcement>
          <a href="mailto:[email protected]">[email protected]</a>
          <a href="tel:+902122222222">+90 (212) 222 22 22</a>
        </Announcement>
        <Navbar />
      </div>
      <div className="container"></div>
    </>
  );
}

응용 프로그램.jsx

ℹ️ If you are thinking what the heck is <>, Take a 👀 at here

💃🏼🕺🏼 STEP 7: Navbar 구성 요소를 사용한 마지막 춤

내가 처음에 언급한 바와 같이 내비게이션 표시줄 구성 요소는 투명해야 하고, 멈출 때 배경색은 흰색이어야 한다.그래서 내비게이션 표시줄을 수정합시다.풍격scss.

@mixin white-bg {
  background-color: white;
  -webkit-box-shadow: 0 4px 8px -8px black;
  -moz-box-shadow: 0 4px 8px -8px black;
  box-shadow: 0 4px 8px -8px black;
}

.navbar-container {
  // @include white-bg deleted
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 1.5rem 10px 1.5rem;
  align-items: center;
  z-index: 9;
  top: calc(1 * (0.4rem + 30px));
  width: 100%;

 // hover added with white-bg mixin
  &:hover {
    @include white-bg;
  }

  .logo {
    &:hover {
      opacity: 0.7;
    }
  }

  .link-container {
    width: 33vw;
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
      font-weight: 600;

      &:hover {
        opacity: 0.7;
      }
    }

    &__left {
      padding-right: 3rem;
    }

    &__right {
      padding-left: 3rem;
    }
  }
}

탐색 모음.풍격scss
다음에 우리가 설치할 위치.탐색 모음 컨테이너를 고정하고 변환을 추가합니다.이후에 우리는 창설할 것이다.스크롤 클래스.

/* other codes */
.navbar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 1.5rem 10px 1.5rem;
  align-items: center;
  z-index: 9;
  position: fixed;
  // position fixed
  top: calc(1 * (0.4rem + 30px));
  width: 100%;
  transition: all 0.1s ease-in;
  // transition added

  &:hover {
    @include white-bg;
  }

  &.scrolled {
    // css class to activate during scroll event
    @include white-bg;
    padding: 5px 25px 5px 25px;
    top: 0;
  }
/* other codes */

탐색 모음.풍격scss

ℹ️ .scrolled class will give Navbar component a white background with a shadow, smaller padding and fix it to top.

우리가 추가하지 않았기 때문에 아래와 같은 구성 요소를 볼 수 있습니다.수업이 꼬였나?

⚠️ Don't know what Hooks is? Take a 👀

import React, { useLayoutEffect } from "react";

import "./navbar.styles.scss";
import logo from "../../logo.svg";
const classNames = require("classnames");
// import hooks and classNames

export default function Navbar() {
  const [scrolled, setScrolled] = React.useState(false);
  // set the state


  useLayoutEffect(() => {
    const handleScroll = () =>
      window.scrollY > 0 ? setScrolled(true) : setScrolled(false);
    // if the window is scrolled, set state of scrolled to true

    window.addEventListener("scroll", handleScroll);
    // add event listener for scroll with the function above

    return () => window.removeEventListener("scroll", handleScroll);
    // clear the event
  }, []);
  // used useLayoutEffect to mutate the DOM


  return (
    // used classNames to append the className
    <nav className={classNames("navbar-container", { scrolled: scrolled })}>
      <div className="link-container link-container__left">
        <a href="/">test</a>
        <a href="/">test</a>
        <a href="/">test</a>
      </div>
      <img src={logo} className="logo" alt="logo" width={150} height={75} />
      <div className="link-container link-container__right">
        <a href="/">test</a>
        <a href="/">test</a>
        <a href="/">test</a>
      </div>
    </nav>
  );
}

탐색 모음.구성 요소jsx
우리가 여기서 하는 일은:

1. Initialize state of scrolled to false as default.
2. Implement useLayoutEffect. Curious about why useLayoutEffect instead of useEffect? Here is a nice comparison.
   • Add handleScroll function. Set state to true or false according to the condition.
   • Add event listener for scroll event.
   • Remove event listener.
3. Implement classNames with scrolled state. Thus, .scrolled class will added or removed according to state value.

🎉 축하하다.

성공했어!당신이 공부하는 과정에서 즐겁기를 바랍니다.만약 당신에게 어떤 문제가 있으면 저에게 알려 주세요.