Reactjs에서 NPM UUID 사용

Oluwafisayo Oluwatayo 2023년6월21일

React React NPM

Reactjs에서 NPM UUID를 사용하여 간단한 ID 생성 앱 만들기
Reactjs에서 NPM UUID를 사용하여 할일 목록 앱 만들기
Reactjs에서 NPM UUID를 사용하여 메모 작성 앱 만들기
결론

앱이 리액트로 빌드될 때 식별이 유사한 구성 요소를 사용하는 경우가 있습니다. UUID는 이러한 구성 요소가 조정되도록 하고 두 구성 요소가 완전히 유사한 경우 업데이트됩니다. 그렇지 않으면 각 구성 요소가 개별적으로 렌더링됩니다.

UUID는 Universal Unique Identifier를 의미하며 구성은 유사하지만 아주 약간의 차이가 있는 항목을 식별하는 데 도움이 됩니다. 항목 목록을 만드는 데 매우 유용합니다.

또한 전자 상거래 웹 사이트에 배치된 항목을 식별하고 구별하는 데 이상적입니다. 예를 들어 신발 판매 웹사이트의 경우 UUID는 해당 웹사이트에 표시되는 다양한 종류의 신발을 식별하는 데 도움이 됩니다.

UUID에 의해 생성된 ID가 반복되지 않기 때문에 React 프레임워크에서 수많은 앱을 만드는 데 매우 효과적입니다. 다양한 종류의 응용 프로그램을 만들기 위해 UUID를 적용하는 방법을 아래에서 살펴보겠습니다.

Reactjs에서 NPM UUID를 사용하여 간단한 ID 생성 앱 만들기

UUID는 타사 종속성이므로 npx를 사용하여 프로젝트 폴더를 생성한 후 터미널에서 해당 프로젝트 폴더로 이동하고 npm install uuid를 사용하여 UUID 종속성을 설치합니다.

완료되면 App.js 내에서 UUID를 가져옵니다. 또한 react-dom에서 ReactDOM을 가져온 다음 몇 가지 코드를 추가합니다.

코드 스니펫 - App.js:

import React from "react";
import ReactDOM from "react-dom";
import { v4 as uuidv4 } from "uuid";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>{uuidv4()}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

출력:

Reactjs NPM uuid를 사용한 간단한 ID 생성 앱 를 사용한 간단한 ID 생성 앱

웹 페이지를 열면 긴 코드가 표시됩니다. 이것은 원시 상태의 UUID를 보여주고 새로 고치면 새 코드가 생성됩니다.

UUID는 우리가 보낸 요청이 매우 유사하고 반복되지 않는 경우에도 요청 시 새 ID를 생성하기 때문입니다.

Reactjs에서 NPM UUID를 사용하여 할일 목록 앱 만들기

UUID를 적용하여 반응하는 Todolist 앱을 생성해 보겠습니다. 할 일 목록에는 앱을 사용하여 목록을 만드는 것이 포함되기 때문에 UUID는 매우 유용합니다. UUID는 목록의 각 항목에 대한 ID를 생성하는 데 도움이 됩니다.

우선, 새로운 반응 프로젝트를 만들고 터미널을 사용하여 프로젝트 폴더로 이동한 다음 몇 가지 종속 항목을 설치해야 합니다.

버튼과 목록을 설정할 수 있도록 부트스트랩을 설치합니다. npm install react-bootstrap을 사용합니다.

다음으로 React에 대한 전환 그룹을 설치합니다. 이렇게 하면 목록에서 항목을 추가하거나 제거할 때 애니메이션 효과가 허용됩니다.

프로젝트 폴더 안에 npm install react-transition-group을 사용하여 이를 수행합니다.

마지막은 UUID입니다. 우리는 프로젝트 폴더 안에 npm i uuid를 사용합니다. 설치 후 index.js 파일 내부의 각 종속성을 가져온 다음 코딩을 시작합니다.

코드 스니펫 - index.js:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Container, ListGroup, Button } from 'react-bootstrap';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { v4 as uuidv4 } from "uuid";
import './App.css';

function TodoList() {
  const [items, setItems] = useState([
    { id: uuidv4(), text: 'Buy eggs' },
    { id: uuidv4(), text: 'Pay bills' },
    { id: uuidv4(), text: 'Invite friends over' },
    { id: uuidv4(), text: 'Fix the TV' },
  ]);
  return (
    <Container style={{ marginTop: '2rem' }}>
      <ListGroup style={{ marginBottom: '1rem' }}>
        <TransitionGroup className="todo-list">
          {items.map(({ id, text }) => (
            <CSSTransition
              key={id}
              timeout={500}
              classNames="item">
              <ListGroup.Item>
                <Button
                  className="remove-btn"
                  variant="danger"
                  size="sm"
                  onClick={() =>
                    setItems(items =>
                      items.filter(item => item.id !== id)
                    )
                  }
                >
                  &times;
                </Button>
                {text}
              </ListGroup.Item>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </ListGroup>
      <Button
        onClick={() => {
          const text = prompt('Enter some text');
          if (text) {
            setItems(items => [
              ...items,
              { id: uuidv4(), text },
            ]);
          }
        }}
      >
        Add Item
      </Button>
    </Container>
  );
}

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

출력:

![Reactjs NPM uuid를 사용하는 할 일 목록 앱](</img/React/reactjs npm uuid.gif>를 사용하는 할 일 목록 앱

앱에서 항목을 추가 및 제거하고 구성 요소의 상태가 변경됩니다. 따라서 구성 요소의 변경 사항을 처리하려면 구성 요소에 useState 후크를 적용해야 합니다.

그런 다음 onClick 이벤트 핸들러를 두 개의 버튼에 할당합니다. 첫 번째 버튼은 삭제 버튼으로 추가된 모든 항목에 첨부됩니다. 이렇게 하면 항목의 ID를 사용하여 목록에서 항목을 삭제할 수 있습니다.

두 번째 버튼은 목록에 항목을 추가하는 데 사용됩니다. 항목 추가 버튼을 클릭하면 입력 필드가 있는 팝업이 표시되며 여기에 추가할 항목을 입력합니다.

그렇게 하면 새 항목이 목록에 표시됩니다. 새 항목이 추가되면 해당 항목에 대한 새 ID가 자동으로 생성됩니다.

onClick 이벤트 핸들러는 이 ID를 사용하여 항목을 제거합니다.

Reactjs에서 NPM UUID를 사용하여 메모 작성 앱 만들기

이 메모 앱은 목록에서 항목을 추가하고 제거할 때 이전에 작업한 할일 목록 앱과 동일하게 작동합니다.

UUID 종속성이 얼마나 효과적이고 적용 가능한지 보여줍니다. 이와 같은 앱 구축 앱을 더 쉽게 만듭니다.

시작하려면 새 프로젝트를 만든 다음 프로젝트 폴더에서 npm install uuid를 사용하여 UUID 종속성을 설치합니다. 그런 다음 src, Main.js 및 Sidebar.js 안에 두 개의 파일을 더 만듭니다.

Main.js는 메모를 작성할 앱의 기본 인터페이스가 됩니다. Sidebar.js는 메모를 관리하는 곳입니다.

App.js 파일 내에서 UUID, Main.js, Sidebar.js를 가져온 다음 다음 코드를 입력합니다.

코드 스니펫 - App.js:

import { useState } from "react";
import {v4 as uuidv4} from "uuid";
import "./App.css";
import Main from "./Main";
import Sidebar from "./Sidebar";

const newNote = () => {
  return { id: uuidv4(), title: "", body: "", lastModified: Date.now() };
};

function App() {
  const [notes, setNotes] = useState([]);
  const [filterednotes, setFilteredNotes] = useState([]);
  const [activeNote, setActiveNote] = useState(false);

  const onAddNote = () => {
    setNotes([newNote(), ...notes]);
  };

  const onUpdateNote = (updatedNote) => {
    const updatedNotesArray = notes.map((note) => {
      if (note.id === activeNote) {
        return updatedNote;
      }
      return note;
    });

    setNotes(updatedNotesArray);
  };

  const onDeleteNote = (idToDelete) => {
    setNotes(notes.filter((note) => note.id !== idToDelete));
  };

  const getActiveNote = () => {
    return notes.find((note) => note.id === activeNote);
  };

  return (
    <div className="App">
      <Sidebar
        notes={notes}
        setNotes={setNotes}
        onAddNote={onAddNote}
        onDeleteNote={onDeleteNote}
        activeNote={activeNote}
        setActiveNote={setActiveNote}
        filterednotes={filterednotes}
        setFilteredNotes={setFilteredNotes}
      />
      <Main activeNote={getActiveNote()} onUpdateNote={onUpdateNote} />
    </div>
  );
}

export default App;

여기에서 구성 요소를 useState 후크에 할당하므로 앱에서 작업할 때 구성 요소의 상태가 업데이트됩니다. onAddNote 이벤트 핸들러는 newNote 기능을 시작하여 새 메모를 추가합니다.

또한 메모 작성 앱을 만들고 있으므로 HTML로 메모를 렌더링하는 데 도움이 되는 종속성이 필요합니다. npm install react-markdown을 사용하여 마크다운을 설치하고 Main.js 내부로 가져온 다음 이 코드를 추가합니다.

코드 스니펫 - Main.js:

import ReactMarkdown from "react-markdown";

const Main = ({ activeNote, onUpdateNote }) => {
  const onEditField = (key, value) => {
    onUpdateNote({
      ...activeNote,
      [key]: value,
      lastModified: Date.now()
    });
  };

  if (!activeNote)
    return <div className="no-active-note">No note selected</div>;
  return (
    <div className="app-main">
      <div className="app-main-note-edit">
        <input
          type="text"
          id="title"
          placeholder="Title"
          value={activeNote.title}
          onChange={(e) => onEditField("title", e.target.value)}
          autoFocus
        />
        <textarea
          id="body"
          placeholder="Write your note here..."
          value={activeNote.body}
          onChange={(e) => onEditField("body", e.target.value)}
        />
      </div>
      <div className="app-main-note-preview">
        <h1 className="preview-title">{activeNote.title}</h1>
        <ReactMarkdown className="markdown-preview">
          {activeNote.body}
        </ReactMarkdown>
      </div>
    </div>
  );
};

export default Main;

여기서 우리는 생성된 노트 안에 입력하고 있으므로 구성 요소를 onChange 이벤트 핸들러에 할당합니다. 메모 작성 앱의 텍스트 영역 내에서 수행하는 모든 변경 사항을 처리합니다.

다음으로 사이드바를 코딩하고 싶지만 먼저 검색, 삭제 및 추가 버튼을 아이콘으로 렌더링할 material-UI 종속성을 설치해야 합니다. 따라서 npm install @material-ui/core로 설치한 다음 npm install @material-ui/icons로 설치합니다.

그런 다음 사용할 아이콘을 가져오고 Sidebar.js 파일에서 일부 코딩을 수행합니다.

코드 스니펫 - Sidebar.js:

import AddIcon from "@material-ui/icons/Add";
import SearchIcon from "@material-ui/icons/Search";
import DeleteIcon from "@material-ui/icons/Delete";
import { useState } from "react";

const Sidebar = ({
  notes,
  filterednotes,
  setFilteredNotes,
  onAddNote,
  onDeleteNote,
  activeNote,
  setActiveNote
}) => {
  const sortedNotes = notes.sort((a, b) => b.lastModified - a.lastModified);
  const [input, setInput] = useState("");
  const getInput = (text) => {
    setInput(text);
    setFilteredNotes((prev) => {
      if (!text) {
        return notes;
      }
      return notes.filter((note) =>
        note.title.toLowerCase().includes(text.toLowerCase())
      );
    });
  };

  const currentActiveNotes = input ? filterednotes : notes;

  return (
    <div className="app-sidebar">
      <div className="app-sidebar-header">
        <h1>
          <span className="highlight">Notes</span>
        </h1>
        <AddIcon className="app-sidebar-header-add" onClick={onAddNote} />
      </div>
      <div className="app-sidebar-search">
        <input
          type="text"
          placeholder="Search"
          onChange={(e) => getInput(e.target.value)}
          value={input}
        ></input>
        <SearchIcon className="app-sidebar-search-icon" />
      </div>
      <div className="app-sidebar-notes">
        {currentActiveNotes.map((note) => (
          <div
            className={`app-sidebar-note ${note.id === activeNote && "active"}`}
            onClick={() => setActiveNote(note.id)}
          >
            <DeleteIcon
              className="sidebar-note-delete"
              onClick={() => onDeleteNote(note.id)}
            />
            <div className="sidebar-note-title">
              <strong>{note.title}</strong>
            </div>
            <p>{note.body && note.body.substr(0, 100) + "..."}</p>
            <small className="note-meta">
              {new Date(note.lastModified).toLocaleDateString("en-GB", {
                hour: "2-digit",
                minute: "2-digit"
              })}
            </small>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Sidebar;

웹 앱을 아름답게 하려면 다음 코드를 App.css 안에 넣어야 합니다.

코드 스니펫 - App.css:

@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

* {
  box-sizing: border-box;
}

/* GLOBAL STYLES */
:root {
  --light-grey: #f4f4f4;
  --red-color: #ff5f5f;
  --h1-font: 35px;
  --reg-font: 24px;
  --top-padding: 30px;
}

body {
  font-family: "Roboto", sans-serif;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-size: 16px;
  background-color: #eeeeee;
}

.App {
  display: flex;
  padding: 20px 50px;
  height: 100vh;
}

/* SIDEBAR STYLES */

.app-sidebar {
  background-color: #fff;
  width: 30%;
  height: 95vh;
  box-shadow: 10px 10px 30px 1px rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  padding: var(--top-padding) 30px;
}

.app-sidebar-header {
  display: flex;
  position: relative;
  padding: 25px 0;
  background-color: white;
}

.app-sidebar-header h1 {
  margin: 0;
}

.highlight {
  position: relative;
}

.highlight:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 30%;
  top: 25px;
  left: 0;
  background-color: var(--red-color);
  opacity: 0.3;
}

.app-sidebar-header-add {
  transform: scale(1.5);
  color: var(--red-color);
  position: absolute;
  right: 0px;
  cursor: pointer;
}

.app-sidebar-search {
  border: 1px solid var(--red-color);
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 30px;
}

.app-sidebar-search input {
  border: none;
  padding-left: 10px;
  font-size: 13px;
  width: 100%;
}

.app-sidebar-search-icon {
  color: var(--red-color);
}

.app-sidebar-notes {
  margin-top: 20px;
  height: calc(95vh - 200px);
  overflow-y: scroll;
}

.app-sidebar-note {
  padding: 20px;
  cursor: pointer;
  border-radius: 15px;
  border: 1px solid var(--red-color);
  margin-bottom: 10px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

.sidebar-note-delete {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red-color);
}

.sidebar-note-title {
  display: flex;
  justify-content: space-between;
  color: #999;
}

.app-sidebar-note p {
  margin: 3px 0;
  font-size: 13px;
  color: #999;
}

.app-sidebar-note small {
  display: block;
  color: #999;
  margin-top: 10px;
  font-size: 10px;
}

.app-sidebar-note:hover {
  background: #ddd;
}

.app-sidebar-note.active,
.app-sidebar-note.active p,
.app-sidebar-note.active small,
.app-sidebar-note.active .sidebar-note-delete {
  background: var(--red-color);
  color: #fff;
}

.app-sidebar-note.active .sidebar-note-title {
  color: black;
}

.app-main {
  width: 70%;
  height: 90vh;
}

.app-main-note-edit,
.app-main-note-preview {
  height: 47vh;
  border-radius: 30px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.no-active-note {
  width: 70%;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
  font-size: 2rem;
  color: #999;
}

.app-main-note-edit {
  padding: 25px;
  background-color: var(--red-color);
}

.app-main-note-edit input,
textarea {
  display: block;
  border: none;
  margin-bottom: 20px;
  width: 100%;
  height: calc(47vh - 130px);
  padding: 20px;
  resize: none;
  font-size: inherit;
  font-family: inherit;
  border-radius: 15px;
}

.app-main-note-edit input {
  height: 50px;
  font-size: 1.5rem;
}

.app-main-note-preview {
  border-top: 1px solid #ddd;
  overflow-y: scroll;
  background-color: #fff;
}

.preview-title {
  padding: 45px 45px 0 45px;
  margin: 0;
}

.markdown-preview {
  padding: 0 45px 45px 45px;
  font-size: 1rem;
  line-height: 2rem;
}

출력:

Reactjs NPM uuid를 사용하는 메모 작성 앱 을 사용하는 메모 작성 앱

결론

항목 목록을 식별하고 관리하는 UUID의 효율성은 특히 전자 상거래 및 포트폴리오 앱에서 코더가 광범위한 항목 목록을 범주 및 하위 범주로 구성하는 작업을 수행하는 앱을 구축하는 데 매우 중요합니다.

작가: Oluwafisayo Oluwatayo

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.