React로 간단한 할 일 목록 앱 만들기

React로 간단한 할 일 목록 앱 만들기
당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다. 자세히 알아보기

React와 같은 새로운 기술을 배우는 것은 실제 경험 없이는 혼란스러울 수 있습니다. 개발자로서 실제 프로젝트를 구축하는 것은 개념과 기능을 이해하는 가장 효과적인 방법 중 하나입니다.





오늘의 MUO 영상 콘텐츠를 계속하려면 스크롤하세요.

React로 간단한 할 일 목록을 만드는 과정을 따라하고 React 기초에 대한 이해를 높이세요.



할 일 목록 생성을 위한 전제 조건

이 프로젝트를 시작하기 전에 몇 가지 요구 사항이 있습니다. HTML, CSS, JavaScript, ES6 , 반응. Node.js가 있어야 하고 JavaScript 패키지 관리자 npm . Visual Studio Code와 같은 코드 편집기도 필요합니다.





이 프로젝트에서 사용할 CSS는 다음과 같습니다.

 /* styles.css */ 
.App { 
  font-family: sans-serif; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.Todo { 
  background-color: wheat; 
  text-align: center; 
  width: 50%; 
  padding: 20px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
  margin: auto; 
} 
 
ul { 
  list-style-type: none; 
  padding: 10px; 
  margin: 0; 
} 
 
button { 
  width: 70px; 
  height: 35px; 
  background-color: sandybrown; 
  border: none; 
  font-size: 15px; 
  font-weight: 800; 
  border-radius: 4px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.input { 
  border: none; 
  width: 340px; 
  height: 35px; 
  border-radius: 9px; 
  text-align: center; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.Top { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
} 
 
li { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  padding: 10px; 
} 
 
li:before { 
  content: "*"; 
  margin-right: 5px; 
}

1. 프로젝트 환경 설정

이 단계에는 프로젝트를 설정하는 데 필요한 모든 명령과 파일이 포함됩니다. 시작하려면 새 React 프로젝트를 만듭니다. 터미널을 열고 다음 명령을 실행합니다.



 npx create-react-app todo-list

필요한 모든 파일과 패키지를 설치하는 데 몇 분 정도 걸립니다. todo-list라는 새로운 React 애플리케이션을 생성합니다. 이와 같은 것을 본다면 올바른 길을 가고 있는 것입니다.

디렉터리 내에서 실행할 명령 목록입니다.

다음 명령을 사용하여 새로 만든 프로젝트의 디렉터리로 이동합니다.



 cd todo-list

다음 명령어를 사용하여 로컬에서 프로젝트를 실행하세요.

 npm start

그런 다음 http://localhost:3000/에서 브라우저의 프로젝트를 봅니다.



프로젝트의 src 폴더에는 필요하지 않은 파일이 몇 개 있습니다. 다음 파일을 삭제합니다. App.css , App.test.js , 로고.svg , reportWebVitals.js , setupTests.js .

React 애플리케이션의 src 폴더에 있는 파일.

사용 가능한 파일에서 import 문을 찾고 삭제된 파일에 대한 참조를 제거했는지 확인하십시오.

2. TodoList 컴포넌트 생성

할 일 목록에 필요한 모든 코드를 구현할 구성 요소입니다. src 폴더에 'TodoList.js'라는 파일을 만듭니다. 그런 다음 모든 것이 제대로 작동하는지 테스트하려면 다음 코드를 추가합니다.

 import React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;  
 

App.js 파일을 열고 TodoList 구성 요소를 가져와 App 구성 요소 내에서 렌더링합니다. 다음과 같이 표시됩니다.

 import React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

localhost:3000이 실행 중인 로컬 브라우저로 이동하여 'Hello World'가 굵게 쓰여 있는지 확인합니다. 문제 없다? 다음 단계로.

불행히도 Google Play 스토어가 중지되었습니다.

3. 입력 및 입력 변경 처리

이 단계에서는 입력 상자에 작업을 입력할 때 이벤트를 트리거할 수 있습니다. React 패키지에서 useState 후크를 가져옵니다. useState는 상태를 효율적으로 관리할 수 있게 해주는 React 후크입니다. .

 import React, { useState } from 'react';

useState 후크를 사용하여 초기 값이 빈 문자열인 'inputTask'라는 상태 변수를 생성합니다. 또한 사용자 입력에 따라 'inputTask' 값을 업데이트하도록 'setInputTask' 함수를 할당합니다.

 const [inputTask, setInputTask] = useState("");

이벤트 매개 변수를 사용하여 'handleInputChange'라는 함수를 만듭니다. setInputTask 함수를 사용하여 inputTask 상태를 업데이트해야 합니다. event.target.value를 사용하여 이벤트의 대상 값에 액세스합니다. 이것은 입력 필드의 값이 변경될 때마다 실행됩니다.

 const handleInputChange = (event) => { 
    setInputTask(event.target.value); 
};

몇 가지 JSX 요소를 반환합니다. 첫 번째는 'My Todo-List'라는 제목입니다. 원하는 제목을 결정할 수 있습니다. 입력 요소에 몇 가지 속성을 포함합니다. 유형 = '텍스트' : 입력 유형을 텍스트로 지정합니다. 값={inputTask} : 입력 필드의 값을 inputTask 상태 변수에 바인딩하여 현재 값을 반영하도록 합니다. onChange={handleInputChange} : 입력 필드의 값이 변경될 때 handleInputChange 함수를 호출하여 inputTask 상태를 업데이트합니다.

 <div className="Todo"> 
    <h1>My To-Do List</h1> 
    <div className="Top"> 
        <input className="input" type="text" value={inputTask} 
           onChange={handleInputChange} placeholder="Enter a task" />

계속해서 입력한 작업을 목록에 추가할 버튼을 만듭니다.

Windows에서 Mac OS를 얻는 방법 
         <button className="btn">ADD</button> 
   </div> 
</div>

이 단계에서 브라우저 출력은 다음과 같습니다.

빈 할 일 목록.

4. '추가' 버튼에 기능 추가

사용 useState 빈 배열의 초기 값으로 'list'라는 상태 변수를 생성하는 후크. 'setList' 변수는 사용자 입력을 기반으로 작업 배열을 저장합니다.

 const [list, setList] = useState([]);

사용자가 새 작업을 추가하기 위해 'ADD' 버튼을 클릭할 때 실행될 함수 handleAddTodo를 만듭니다. 사용자가 입력한 새 작업을 나타내는 todo 매개변수를 사용합니다. 그런 다음 Math.random()을 사용하여 생성된 고유 ID와 입력 텍스트를 보유하는 todo 속성으로 객체 newTask를 생성합니다.

계속해서 확산 연산자 […list]를 사용하여 목록 상태를 업데이트하여 목록에 있는 기존 작업으로 새 배열을 만듭니다. 배열 끝에 newTask를 추가합니다. 이렇게 하면 원래 상태 배열을 변경하지 않습니다. 마지막으로 inputTask 상태를 빈 문자열로 재설정하여 사용자가 버튼을 클릭하면 입력 필드를 지웁니다.

 const handleAddTodo = (todo) => { 
    const newTask = { 
        id: Math.random(), 
        todo: todo 
   }; 
 
   setList([...list, newTask]); 
    setInputTask(''); 
};

포함 onClick 텍스트 'ADD'가 있는 버튼 요소에 대한 속성입니다. 클릭하면 목록 상태에 새 작업을 추가하는 handleAddTodo 함수가 트리거됩니다.

 <button onClick={() => handleAddTodo(inputTask)}>ADD</button>

이 단계에서 브라우저 출력은 동일하게 보이지만 작업을 입력한 후 '추가' 버튼을 클릭하면 입력 필드가 비어 있습니다. 제대로 작동하면 다음 단계로 넘어갑니다.

5. 삭제 버튼 추가

이것은 사용자가 실수를 했거나 작업을 완료한 경우 작업을 삭제할 수 있도록 하는 마지막 단계입니다. 사용자가 특정 작업에 대해 '삭제' 버튼을 클릭할 때 이벤트 핸들러 역할을 하는 handleDeleteTodo 함수를 만듭니다. 태스크의 ID를 매개변수로 사용합니다.

함수 내에서 목록 배열의 필터 메서드를 사용하여 일치하는 ID가 있는 작업을 제외하는 새 배열 newList를 만듭니다. 필터 메서드는 목록 배열의 각 항목을 반복하고 주어진 조건을 만족하는 항목만 포함하는 새 배열을 반환합니다. 이 경우 각 작업의 ID가 매개변수로 전달된 ID와 동일한지 확인합니다. 상태를 새 필터링된 배열로 설정하는 setList(newList)를 호출하여 목록 상태를 업데이트하여 목록에서 일치하는 ID가 있는 작업을 효과적으로 제거합니다.

 const handleDeleteTodo = (id) => { 
    const newList = list.filter((todo) =>  
        todo.id !== id 
   ); 
 
    setList(newList);  
};

map 메서드를 사용하여 목록 배열의 각 항목을 반복하고 새 배열을 반환합니다. 그런 다음 목록 배열의 각 todo 개체에 대한 작업을 나타내는

  • 요소를 만듭니다. React에서 요소 목록을 렌더링할 때 key 속성을 추가했는지 확인하세요. 이는 React가 각 목록 항목을 고유하게 식별하고 변경될 때 UI를 효율적으로 업데이트하는 데 도움이 됩니다. 이 경우 고유성을 보장하기 위해 키를 각 할일 객체의 id로 설정합니다.

    각 todo 객체의 todo 속성에 액세스합니다. 마지막으로 버튼을 클릭하면 해당 작업의 ID를 매개변수로 사용하여 handleDeleteTodo 함수를 트리거하여 목록에서 작업을 삭제할 수 있는 버튼을 만듭니다.

     <ul> 
    { list.map((todo) => ( 
       <li className="task" key={todo.id}> 
            {todo.todo} 
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button> 
        </li> 
    ))} 
    </ul>

    최종 코드는 다음과 같아야 합니다.

     import React, { useState } from 'react'; 
     
    const TodoList = () => { 
        const [inputTask, setInputTask] = useState(''); 
        const [list, setList] = useState([]); 
     
        const handleAddTodo = () => { 
            const newTask = { 
                id: Math.random(), 
                todo: inputTask 
            }; 
     
           setList([...list, newTask]); 
            setInputTask(''); 
        }; 
     
       const handleDeleteTodo = (id) => { 
            const newList = list.filter((todo) => todo.id !== id); 
            setList(newList); 
        }; 
     
       const handleInputChange = (event) => { 
            setInputTask(event.target.value); 
        }; 
     
       return ( 
            <div className="Todo"> 
                <h1>My To-Do List</h1> 
     
                <div className="Top"> 
                    <input className="input" type="text" value={inputTask} 
                       onChange={handleInputChange} placeholder="Enter a task" /> 
     
                    <button className="btn" onClick={handleAddTodo}>ADD</button> 
                </div> 
     
               <ul> 
                    { list.map((todo) => ( 
                        <li className="task" key={todo.id}> 
                            {todo.todo} 
                            <button onClick={() => handleDeleteTodo(todo.id)}> 
                               Delete 
                           </button> 
                        </li> 
                    ))} 
                </ul> 
            </div> 
        ); 
    }; 
     
    export default TodoList;

    이것은 추가 및 삭제 버튼이 모두 예상대로 작동하는 최종 출력 결과입니다.

    여러 작업을 보여주는 할 일 목록.

    축하합니다. 작업을 추가하고 삭제하는 할 일 목록을 만들었습니다. 스타일과 더 많은 기능을 추가하여 더 나아갈 수 있습니다.

    실제 프로젝트를 사용하여 React 배우기

    연습은 효과적인 학습 방법이 될 수 있습니다. 이를 통해 React 개념과 모범 사례를 실습 방식으로 적용하여 프레임워크에 대한 이해를 강화할 수 있습니다. 수많은 프로젝트가 있으므로 올바른 프로젝트를 찾아야 합니다.