React로 간단한 할 일 목록 앱 빌드하기

React와 같은 새로운 기술 프레임워크에 능숙해지는 것은 실제적인 노출 없이는 당황스러울 수 있습니다. 실제 애플리케이션을 구축하는 행위는 개발자가 시스템의 원리와 기능을 파악할 수 있는 탁월한 수단으로 작용합니다.

React를 사용하여 간단한 할 일 목록을 작성함으로써 이 자바스크립트 라이브러리의 기본 원리에 대한 이해도를 높입니다.

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

HTML, CSS, JavaScript, ES6, React는 물론 Node.js와 JavaScript 패키지 관리자인 npm을 알아야 합니다. 또한 Visual Studio Code와 같은 코드 편집기를 사용해야 합니다.

본 프로젝트는 다양한 구성 요소와 기능의 시각적 모양에 대한 기본 원칙으로 사용되는 특정 CSS(Cascading Style Sheet) 프레임워크를 사용합니다.

 /* 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;
} 

프로젝트 환경 설정

개발 프로세스의 초기 단계에는 프로젝트 설정에 필요한 적절한 명령과 파일 활용이 포함됩니다. 시작하려면 터미널을 열고 다음 명령을 실행하여 새 React 프로젝트를 설정합니다:

 npx create-react-app todo-list 

필요한 파일과 패키지를 설치한 후 “할 일 목록”으로 지정된 새 React 애플리케이션에 필요한 구성 요소를 설정하는 데 몇 분 정도 걸릴 수 있습니다. 프로세스가 만족스럽게 진행되고 있음을 확인하면 올바른 경로를 시작했음을 확신할 수 있습니다.

관련 파일 시스템을 참조하고 지정된 지시어를 사용하여 앞서 언급한 디렉토리를 탐색하면 최근에 설립된 벤처의 위치로 이동할 수 있을 것입니다.

 cd todo-list 

다음 명령을 실행하여 로컬 컴퓨터에서 프로젝트를 실행하세요:

 npm start 

선호하는 인터넷 브라우저에서 에 접속하여 웹 브라우저를 통해 프로젝트를 관찰하세요.

요구 사항에 불필요한 것으로 간주되는 “src” 폴더의 모든 파일을 삭제합니다. 특히 App.css, App.test.js, logo.svg, reportWebVitals.js 및 setupTests.js를 삭제합니다.

사용 가능한 파일에서 가져오기 문을 검사하고 제거된 콘텐츠에 대한 참조를 모두 제거하세요.

할 일 목록 컴포넌트 생성

할 일 목록에 필요한 코드 구현은 소스 폴더 내에 있는 TodoList.js 파일 내에서 수행됩니다. 제대로 작동하는지 확인하려면 테스트 목적으로 다음 코드 조각을 포함하세요.

 import React from 'react';

const TodoList = () => {
    return (
        <div>
            <h2>Hello World </h2>
        </div>
    );
};

export default TodoList; 
  

App.js 파일을 열고 TodoList 컴포넌트를 가져왔는지 확인하세요.그런 다음 앱 컴포넌트 본문 내에서 JSX 구문을 사용하여 TodoList 컴포넌트를 렌더링합니다. 결과 코드는 다음 예시와 비슷해야 합니다.

 import React from 'react';
import './styles.css'
import TodoList from './TodoList';

const App = () => {
    return (
        <div>
            <TodoList />
        </div>
    );
};

export default App;
 

localhost:3000을 통해 액세스할 수 있는 로컬 브라우저에 표시되는 웹 페이지를 확인하여 “Hello World”가 굵은 글꼴로 눈에 잘 띄게 표시되는지 확인합니다. 모든 것이 올바르게 작동하면 다음 단계로 진행하세요.

입력 및 입력 변경 처리

이 단계를 구현하면 React 패키지에서 사용 상태 훅을 가져와서 텍스트 입력 필드에 작업을 입력할 때 이벤트를 활성화할 수 있습니다. 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 요소를 반환합니다. 첫 번째 요소는 “내 할 일 목록”을 표시하는 제목이고, 두 번째 요소는 다양한 속성을 가진 입력 필드입니다. 구체적으로 “type” 속성은 “text”로 설정되어 있고, “value”는 중괄호를 사용하여 상태 변수 “inputTask”에 바인딩되어 있으며, “onChange”는 입력 필드의 값이 변경될 때 “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" /> 

버튼을 클릭하면 사용자가 입력한 작업을 기존 작업 목록에 추가하는 버튼을 인터페이스에 추가하세요.

         <button className="btn">ADD</button>
   </div>
</div>
 

이 시점에서 브라우저 출력의 모양은 다음과 같습니다:

‘ADD’ 버튼에 기능 추가

useState 훅을 활용하여 처음에는 빈 배열을 보유하는 ‘list’라는 상태 변수를 만듭니다. ‘setList’ 함수는 사용자 입력에 따라 결정된 작업 목록을 저장하는 역할을 담당합니다.

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

‘ADD’ 버튼을 클릭하면 핸들AddTodo 함수가 실행되어 Todo 항목을 인수로 받습니다. 이 함수는 새로운 작업 인스턴스를 생성하여 Math.random() 메서드를 사용하여 생성된 임의의 식별자를 할당하고 제공된 입력과 일치하도록 제목을 설정합니다.

목록 상태를 업데이트하려면 스프레드 연산자 […list]를 사용하여 현재 작업 목록을 포함하는 새 배열을 구성해야 합니다. 새로 추가된 작업을 배열의 끝에 추가함으로써 원래 상태 배열이 변경되지 않도록 합니다. 그 후 입력 태스크 상태를 빈 문자열로 재설정하면 버튼을 클릭할 때 사용자의 편의를 위해 입력 필드가 지워집니다.

 const handleAddTodo = (todo) => {
    const newTask = {
        id: Math.random(),
        todo: todo
   };

   setList([...list, newTask]);
    setInputTask('');
};  

onClick 속성을 “ADD” 텍스트가 있는 버튼 요소에 포함시킵니다. 클릭하면 handleAddTodo 함수가 트리거되어 목록 상태에 새 작업을 추가합니다.

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

애플리케이션의 기능은 사용자가 작업을 입력한 후 “추가” 버튼을 클릭하면 입력 필드에 내용이 없어지도록 하는 것입니다. 이 작업이 문제없이 수행되는 경우 시스템은 다음 단계로 진행됩니다.

삭제 버튼 추가

궁극적인 목표는 오류 발생 시 또는 완료 시 사용자가 작업을 삭제할 수 있는 기능을 제공하는 것입니다. 이를 위해 사용자가 특정 작업의 ‘삭제’ 버튼을 클릭할 때 이벤트 리스너 역할을 하는 `handleDeleteTodo`라는 함수를 구현합니다. 이 함수는 작업의 고유 식별자를 매개변수로 받아야 합니다.

함수 컴포넌트 내에서 “list” 배열에 “filter” 메서드를 사용하여 해당 식별자를 가진 작업을 생략하는 새 컬렉션 “newList”를 생성합니다. “filter” 메서드는 “list” 배열 내의 모든 요소를 순회하여 지정된 전제 조건을 충족하는 컴포넌트로만 구성된 컬렉션을 반환합니다. 이 경우 각 할당의 ID가 인수로 제공된 ID와 동일한지 확인합니다. “setList(newList)”를 호출하여 “list” 상태를 수정하면 상태가 정제된 컬렉션으로 설정되어 목록에서 일치하는 식별자를 가진 작업이 제거됩니다.

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

    setList(newList); 
}; 

`map()` 메서드를 사용하여 `list` 배열의 항목을 반복하여 해당 `todo` 객체에서 각 작업을 나타내는 `

 <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;