[JavaScript 프로젝트 시리즈] 7일차: JavaScript로 프런트엔드 프레임워크와 통합하기

7. 프런트엔드 프레임워크와 통합하기

프로젝트 개요

이번 프로젝트에서는 JavaScript 프런트엔드 프레임워크인 React를 사용하여 간단한 애플리케이션을 만들어보겠습니다. React는 컴포넌트 기반의 UI 라이브러리로, 복잡한 사용자 인터페이스를 구축하는 데 유용합니다.

준비물

• Node.js와 npm
• React
• HTML, CSS, JavaScript

단계 1: 프로젝트 초기화

먼저, 새로운 React 프로젝트를 초기화합니다. 터미널에서 다음 명령을 실행합니다.

npx create-react-app my-react-app
cd my-react-app

단계 2: 기본 컴포넌트 만들기

React 앱의 기본 구조를 설정하고, 간단한 컴포넌트를 만들어봅니다.

App.js

import React, { useState } from 'react';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [task, setTask] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (task.trim()) {
      setTasks([...tasks, { text: task, completed: false }]);
      setTask('');
    }
  };

  const toggleComplete = (index) => {
    const newTasks = [...tasks];
    newTasks[index].completed = !newTasks[index].completed;
    setTasks(newTasks);
  };

  const deleteTask = (index) => {
    const newTasks = tasks.filter((_, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Todo List</h1>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            value={task}
            onChange={(e) => setTask(e.target.value)}
            placeholder="Enter a new task"
          />
          <button type="submit">Add Task</button>
        </form>
        <ul>
          {tasks.map((task, index) => (
            <li key={index} className={task.completed ? 'completed' : ''}>
              <span onClick={() => toggleComplete(index)}>{task.text}</span>
              <button onClick={() => deleteTask(index)}>Delete</button>
            </li>
          ))}
        </ul>
      </header>
    </div>
  );
}

export default App;

App.css

.App {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

.App-header {
  text-align: center;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
  margin-bottom: 20px;
}

input {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

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

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

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

li.completed span {
  text-decoration: line-through;
  color: #888;
}

li button {
  background-color: #dc3545;
}

li button:hover {
  background-color: #c82333;
}

단계 3: 앱 실행하기

프로젝트를 설정하고 코드를 작성한 후, 애플리케이션을 실행하여 확인합니다.

npm start

이 명령어를 실행하면 React 개발 서버가 시작되고, 기본 브라우저에서 애플리케이션이 열립니다.

단계 4: 기능 구현

위 코드에서 기본적인 To-Do 리스트 기능을 구현했습니다. 사용자는 할 일을 추가하고, 완료 표시를 하고, 목록에서 삭제할 수 있습니다.

기능 설명

• 추가: 사용자가 입력한 할 일을 추가합니다.
• 완료 표시: 할 일을 클릭하면 완료 상태로 표시됩니다.
• 삭제: 삭제 버튼을 클릭하여 할 일을 삭제합니다.

결론

이로써 React를 사용하여 간단한 To-Do 리스트 애플리케이션을 완성했습니다. 이 프로젝트를 통해 React의 기본 개념과 컴포넌트 기반 개발 방식을 이해할 수 있습니다.

JavaScript 프로젝트 시리즈를 통해 다양한 JavaScript 기능과 프레임워크를 활용하여 실제 애플리케이션을 만드는 방법을 배웠습니다. 추가적인 도움이 필요하면 언제든지 말씀해 주세요!