React 로 Notes 앱 구축하기

소개

이 프로젝트에서는 React 를 사용하여 간단한 메모 앱을 만들 것입니다. 이 앱을 통해 사용자는 메모를 추가, 편집 및 삭제할 수 있습니다. 개발을 여러 단계로 나누어 각 단계가 특정 요구 사항을 충족하고 필수 기능을 추가하도록 할 것입니다.

👀 미리보기

Notes App

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

Create React App 명령을 사용하여 새로운 React 프로젝트를 만드는 방법
사용자 인터페이스를 만들기 위해 기능적인 React 컴포넌트를 구축하는 방법
React 의 useState 훅을 사용하여 상태를 관리하는 방법
애플리케이션 내에서 메모를 추가하고 관리하는 방법
메모 추가, 편집 및 삭제와 같은 기능을 구현하는 방법
React 컴포넌트에서 사용자 상호 작용 및 이벤트를 처리하는 방법
CSS 를 사용하여 React 애플리케이션의 스타일을 지정하는 방법
기본적인 CRUD (Create, Read, Update, Delete) 애플리케이션을 개발하는 방법
React 프로젝트를 구조화하고 구성하는 방법
메모 앱을 위한 간단하고 반응형 사용자 인터페이스를 구축하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

새로운 React 프로젝트 설정
React 컴포넌트 생성 및 관리
컴포넌트 상태 관리를 위해 useState와 같은 React 훅 사용
React 애플리케이션에서 사용자 입력 및 폼 제출 처리
props 를 사용하여 부모 및 자식 컴포넌트 간에 데이터와 함수 전달
React 에서 반응형 및 대화형 사용자 인터페이스 생성
React 애플리케이션 내에서 기본적인 데이터 저장 및 조작 구현
React 프로젝트에서 코드 파일 구조화 및 구성
React 컴포넌트 스타일 지정을 위해 CSS 사용
React 애플리케이션 디버깅 및 문제 해결
React 애플리케이션 구축을 위한 모범 사례 따르기

프로젝트 설정

요구 사항:

새로운 React 프로젝트에서 종속성 설치.

기능:

필요한 종속성 및 기본 프로젝트 구조로 프로젝트를 초기화합니다.

단계:

터미널을 열고 프로젝트 폴더로 이동합니다.
```
cd notes-app
```
이 명령은 project 디렉토리 아래에서 실행해야 합니다.
프로젝트에 종속성 설치:
```
npm install
```
설치가 완료되면 node_modules 폴더가 생성됩니다. 존재하지 않는다면 설치가 성공적으로 완료되지 않은 것입니다.

Note 컴포넌트 생성

요구 사항:

개별 노트를 나타내는 Note 컴포넌트를 생성합니다.
Note 컴포넌트는 노트 내용을 표시하고, 편집 버튼과 삭제 버튼을 제공해야 합니다.

기능:

노트의 제목과 텍스트를 표시합니다.
노트를 편집하고 삭제하기 위한 버튼을 제공합니다.

단계:

src 폴더 내에 Note.js라는 새 파일을 생성합니다.
다음과 같이 Note 컴포넌트를 구현합니다.

import React from "react";

const Note = ({ note }) => {
  return (
    <div className="note">
      <h3>{note.title}</h3>
      <p>{note.text}</p>
      <button>Edit</button>
      <button>Delete</button>
    </div>
  );
};

export default Note;

App 컴포넌트 및 State 생성

요구 사항:

노트와 해당 상태를 관리할 App 컴포넌트를 생성합니다.
노트 배열을 저장하기 위해 상태를 초기화합니다.
노트를 추가, 삭제 및 편집하는 함수를 구현합니다.

기능:

노트 배열을 유지합니다.
새로운 노트를 추가합니다.
노트를 삭제합니다.
노트를 편집합니다.

단계:

src 폴더에서 App.js 파일을 엽니다.

파일 상단에서 useState 훅을 가져옵니다.

// App.js
import React, { useState } from "react";
import "./App.css";
import Note from "./Note";

App 컴포넌트 내에서 노트를 추가, 삭제 및 편집하기 위한 초기 상태와 함수를 설정합니다.

// App.js
function App() {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState({ title: "", text: "" });

  const addNote = () => {
    // TODO: Implement addNote function
  };

  const deleteNote = (id) => {
    // TODO: Implement deleteNote function
  };

  const editNote = (id, newText) => {
    // TODO: Implement editNote function
  };

  return <div className="App">{/* App content goes here */}</div>;
}

노트 추가 기능 구현

요구 사항:

새로운 노트를 상태에 추가하는 addNote 함수를 구현합니다.
노트에 제목과 텍스트가 있는지 확인합니다.

기능:

새로운 노트를 상태에 추가합니다.
노트를 추가한 후 입력 필드를 지웁니다.

단계:

addNote 함수를 구현합니다.

// App.js
const addNote = () => {
  if (newNote.title && newNote.text) {
    const newId = Date.now().toString();
    setNotes([...notes, { ...newNote, id: newId }]);
    setNewNote({ title: "", text: "" });
  }
};

JSX 에서 onChange 핸들러를 사용하여 입력 값을 캡처하고 상태를 업데이트합니다.

// App.js
return (
  <div className="App">
    <h1>Notes App</h1>
    <div className="note-form">
      <input
        type="text"
        placeholder="Title"
        value={newNote.title}
        onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
      />
      <textarea
        rows="4"
        cols="50"
        placeholder="Text"
        value={newNote.text}
        onChange={(e) => setNewNote({ ...newNote, text: e.target.value })}
      />
      <button onClick={addNote}>Add Note</button>
    </div>
  </div>
);

노트 삭제 기능 구현

요구 사항:

"삭제" 버튼을 클릭했을 때 상태에서 노트를 제거하는 deleteNote 함수를 구현합니다.

기능:

"삭제" 버튼을 클릭했을 때 상태에서 노트를 삭제합니다.

단계:

deleteNote 함수를 구현합니다.

// App.js
const deleteNote = (id) => {
  const updatedNotes = notes.filter((note) => note.id !== id);
  setNotes(updatedNotes);
};

노트 삭제를 활성화하기 위해 deleteNote 함수를 Note 컴포넌트에 prop 으로 전달합니다.

// App.js
<div className="App">
  <div className="note-list">
    {notes.map((note) => (
      <Note key={note.id} note={note} onDelete={deleteNote} onEdit={editNote} />
    ))}
  </div>
</div>

노트 수정 기능 구현

요구 사항:

"수정" 버튼을 클릭했을 때 노트의 텍스트를 업데이트하는 editNote 함수를 구현합니다.

기능:

편집 가능한 텍스트 영역 (textarea) 에 노트 텍스트를 표시합니다.
"저장" 버튼을 클릭했을 때 노트의 텍스트를 업데이트합니다.

단계:

editNote 함수를 구현합니다.

// App.js
const editNote = (id, newText) => {
  const updatedNotes = notes.map((note) =>
    note.id === id ? { ...note, text: newText } : note
  );
  setNotes(updatedNotes);
};

편집을 처리하도록 Note 컴포넌트를 업데이트합니다.

// Note.js
import React, { useState } from "react";
const Note = ({ note, onDelete, onEdit }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(note.text);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    onEdit(note.id, editedText);
    setIsEditing(false);
  };

  return (
    <div className="note">
      <div className="note-header">
        <h3>{note.title}</h3>
        <button onClick={() => onDelete(note.id)}>Delete</button>
      </div>
      {isEditing ? (
        <>
          <textarea
            rows="4"
            cols="50"
            value={editedText}
            onChange={(e) => setEditedText(e.target.value)}
          />
          <button onClick={handleSave}>Save</button>
        </>
      ) : (
        <p>{note.text}</p>
      )}
      {!isEditing && <button onClick={handleEdit}>Edit</button>}
    </div>
  );
};

스타일링 (App.css)

요구 사항:

시각적으로 보기 좋은 인터페이스를 위해 앱에 기본적인 스타일을 적용합니다.

기능:

사용자 경험 향상을 위해 앱 컴포넌트에 스타일을 적용합니다.

단계:

App.css 파일을 생성하고 앱 컴포넌트에 기본적인 스타일을 적용합니다. 앱 스타일링을 위해 제공된 CSS 코드를 사용합니다.

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  background-color: #343a40;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.note-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.note-form input[type="text"],
.note-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid #007bff;
  background-color: transparent;
  font-size: 16px;
  transition: border-bottom 0.3s;
}

.note-form input[type="text"]:focus,
.note-form textarea:focus {
  border-bottom: 2px solid #0056b3;
  outline: none;
}

.note-form button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-form button:hover {
  background-color: #0056b3;
}

.note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.note {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.note:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-header h3 {
  margin: 0;
  font-size: 24px;
  color: #007bff;
}

.note-actions {
  display: flex;
  gap: 10px;
}

.note-actions button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-actions button:hover {
  background-color: #0056b3;
}

앱 실행

React Notes 앱을 실행하려면:

터미널 또는 명령 프롬프트를 엽니다.
프로젝트의 루트 디렉토리 ( package.json 파일이 있는 곳) 에 있는지 확인합니다.
개발 서버를 시작합니다:
```
npm start
```
이제 브라우저의 8080 포트에서 기본적인 React 앱이 실행되는 것을 볼 수 있습니다. 이 기본 앱을 기반으로 Notes 앱을 만들 것입니다.
페이지의 효과는 다음과 같습니다:

요약

이 프로젝트에서는 React 를 사용하여 개발을 여러 단계로 나누어 간단한 Notes 앱을 만들었습니다. 프로젝트를 설정하고, 노트에 대한 컴포넌트를 생성했으며, 노트를 추가, 삭제 및 편집하는 기능을 구현하고 기본적인 스타일을 적용했습니다. 이러한 단계를 따르면 기능적인 Notes 앱을 구축하고 요구 사항에 맞게 기능을 확장할 수 있습니다.