나의 React 여정: 28일차

React에서 할 일 목록 만들기

오늘은 간단하면서도 강력한 To-Do List 앱을 만들기 위해 React 프로젝트를 진행했습니다. 이 프로젝트를 통해 React 후크, 상태 관리 및 이벤트 처리에 대한 이해가 깊어졌으며 작업을 위아래로 이동하는 등의 추가 기능으로 기능을 향상할 수 있었습니다.

제가 배우고 실천한 내용을 정리했습니다.

1. 구성요소 설정
작업 관리를 위해 useState 후크를 사용하도록 ToDoList.jsx를 구성했습니다. 이를 통해 작업 목록을 동적으로 업데이트하고 렌더링할 수 있었습니다. 다음은 작업 관리를 위한 기본 설정입니다.

import React, { useState } from 'react';

export default function ToDoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  function handleInputChange(event) {
    setNewTask(event.target.value); // Enables us to see what we type
  }

  function addTask() {
    if (newTask.trim() !== "") {
      setTasks(t => [...t, newTask]); // Adds the new task to the task list
      setNewTask(""); // Resets the input field
    }
  }
}

2. 작업 추가 및 삭제
작업을 추가하고 삭제하기 위해 상태를 조작하는 방법을 배웠습니다. addTask 함수는 입력을 추가하기 전에 입력이 유효한지 확인하는 반면, deleteTask는 인덱스를 기반으로 특정 작업을 제거합니다.

function deleteTask(index) {
  const updatedTasks = tasks.filter((_, i) => i !== index); // Removes the task at the given index
  setTasks(updatedTasks);
}

3. 작업을 위아래로 이동
프로젝트의 주요 개선 사항은 작업 재정렬을 구현하는 것이었습니다. moveTaskUp 및 moveTaskDown 함수는 인덱스를 기준으로 작업을 재정렬합니다.

function moveTaskUp(index) {
  if (index > 0) {
    const updatedTasks = [...tasks];
    [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]];
    setTasks(updatedTasks);
  }
}

function moveTaskDown(index) {
  if (index < tasks.length - 1) {
    const updatedTasks = [...tasks];
    [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]];
    setTasks(updatedTasks);
  }
}

4. CSS로 스타일 추가
앱을 시각적으로 매력적으로 만들기 위해 index.css에 사용자 정의 스타일을 적용했습니다. 주요 내용은 다음과 같습니다.

버튼 스타일:

button {
  font-size: 1.7rem;
  font-weight: bold;
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.5s ease;
}
.add-button {
  background-color: hsl(125, 47%, 54%);
}
.add-button:hover {
  background-color: hsl(125, 47%, 44%);
}

작업 항목 스타일링:

li {
  font-size: 2rem;
  font-weight: bold;
  padding: 15px;
  background-color: hsl(0, 0%, 97%);
  margin-bottom: 10px;
  border: 3px solid hsla(0, 0%, 85%, 0.75);
  border-radius: 5px;
  display: flex;
  align-items: center;
}

5. 완료해야 할 일 목록
ToDoList.jsx 구성 요소에서 모든 것이 어떻게 결합되는지는 다음과 같습니다.

return (
  <div className='to-do-list'>
    <h1>To-Do List</h1>
    <div>
      <input 
        type='text'
        placeholder='Enter a task...'
        value={newTask}
        onChange={handleInputChange}
      />
      <button className='add-button' onClick={addTask}>
        Add
      </button>
    </div>

    <ol>
      {tasks.map((task, index) => (
        <li key={index}>
          <span className='text'>{task}</span>
          <button className='delete-button' onClick={() => deleteTask(index)}>Delete</button>
          <button className='move-button' onClick={() => moveTaskUp(index)}>☝️</button>
          <button className='move-button' onClick={() => moveTaskDown(index)}>?</button>
        </li>
      ))}
    </ol>
  </div>
);

주요 시사점

1. React 후크: useState 후크는 로컬 구성 요소 상태를 관리하는 효율적인 방법입니다.
2. 이벤트 처리: handlerInputChange, addTask 및 deleteTask와 같은 함수는 사용자 상호 작용이 UI를 업데이트할 수 있는 방법을 보여줍니다.
3. 동적 목록 렌더링: 지도를 사용하여 작업을 반복하면 앱이 동적으로 변화에 반응하게 됩니다.
4. 스타일링 모범 사례: CSS 호버 효과와 전환을 결합하면 사용자 경험이 향상됩니다.

한걸음씩

소스코드
GitHub에서 이 프로젝트의 전체 소스 코드에 액세스할 수 있습니다.
? 할 일 목록 React 앱 저장소

프로젝트를 자유롭게 탐색하고 포크하고 기여해 보세요!

위 내용은 나의 React 여정: 28일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!