안녕하세요! 이번 포스트에서는 리액트를 사용하여 간단한 To Do 앱을 만들면서 할 일 추가 기능을 구현하는 방법에 대해 자세히 알아보겠습니다. 이 강좌는 리액트에 대한 기초 지식이 있는 분들을 위해 작성되었으며, 중급자 및 고급자에게도 유용한 정보를 제공할 것입니다. 리액트의 기초부터 시작하여 단계별로 앱을 완성해 나가는 과정에 대해 설명드리겠습니다.
1. 리액트 소개
리액트(React)는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 페이스북에서 개발하였습니다. 리액트는 재사용 가능한 UI 컴포넌트를 만들어 효율적으로 웹 애플리케이션을 구축할 수 있도록 도와줍니다.
2. 프로젝트 설정
To Do 앱을 만들기 위해, 먼저 리액트로 새 프로젝트를 설정하겠습니다. 다음의 단계를 따라 해보세요:
npx create-react-app todo-app위의 명령어를 터미널에 입력하면, 리액트 앱의 기본 구조가 생성됩니다. 생성된 디렉토리로 이동하려면 다음 명령어를 입력합니다:
cd todo-app3. 필요한 패키지 설치
우리의 To Do 앱에는 사용자가 할 일을 입력하고 추가할 수 있는 폼이 필요합니다. 이를 위해 useState 및 useEffect 훅을 사용할 것입니다. 별도로 설치할 패키지는 필요하지 않지만, 프로젝트를 좀 더 개선하기 위해 추가적인 라이브러리를 사용해 볼 수 있습니다.
4. 기본 구조 세팅
src 디렉토리 내부에 components라는 폴더를 만들고, 그 안에 TodoList.js와 AddTodo.js라는 두 개의 컴포넌트 파일을 생성합니다.
TodoList.js
import React from 'react';
const TodoList = ({ todos }) => {
return (
할 일 목록
{todos.map((todo, index) => (
- {todo}
))}
);
}
export default TodoList;AddTodo.js
import React, { useState } from 'react';
const AddTodo = ({ addTodo }) => {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
}
const handleSubmit = (e) => {
e.preventDefault();
if (inputValue) {
addTodo(inputValue);
setInputValue('');
}
}
return (
);
}
export default AddTodo;App.js 수정
제공된 TodoList 및 AddTodo 컴포넌트를 App.js에 추가하겠습니다. 아래와 같이 내용을 수정합니다:
import React, { useState } from 'react';
import TodoList from './components/TodoList';
import AddTodo from './components/AddTodo';
const App = () => {
const [todos, setTodos] = useState([]);
const addTodo = (todo) => {
setTodos([...todos, todo]);
}
return (
할 일 목록 앱
5. 앱 실행하기
이제 앱을 실행해보겠습니다. 개발 서버를 실행하려면 다음 명령어를 입력합니다:
npm start브라우저에서 localhost:3000으로 이동하면, 할 일 목록 추가 기능이 있는 간단한 To Do 앱이 나타나는 것을 확인할 수 있습니다.
6. 기능 확장하기
우리는 기본적인 할 일 추가 기능을 구현했습니다. 이제 몇 가지 기능을 추가하여 앱을 개선할 수 있습니다. 예를 들어:
- 할 일 삭제 기능
- 할 일을 완료 처리하는 기능
- 할 일 수정 기능
이러한 기능을 추가하면 사용자가 보다 효율적으로 To Do 앱을 사용할 수 있습니다.
6.1 할 일 삭제 기능 추가하기
할 일 삭제 기능은 사용자가 완료한 할 일을 쉽게 삭제할 수 있도록 도와줍니다. 아래와 같이 TodoList.js를 수정합니다:
import React from 'react';
const TodoList = ({ todos, removeTodo }) => {
return (
할 일 목록
{todos.map((todo, index) => (
-
{todo}
))}
);
}
export default TodoList;이제 App.js에서 removeTodo 함수를 추가하여 할 일을 삭제할 수 있는 기능을 구현해야 합니다.
const removeTodo = (index) => {
setTodos(todos.filter((_, i) => i !== index));
}마지막으로 AddTodo, TodoList 컴포넌트를 호출할 때 removeTodo 함수를 전달합니다.
<TodoList todos={todos} removeTodo={removeTodo} />6.2 할 일 완료 처리 기능 추가하기
이제 할 일을 완료할 수 있는 기능을 추가해 보겠습니다. 다시 TodoList.js를 수정하여 체크박스를 추가합니다.
import React from 'react';
const TodoList = ({ todos, removeTodo, toggleTodo }) => {
return (
할 일 목록
{todos.map((todo, index) => (
-
toggleTodo(index)}
/>
{todo.text}
))}
);
}
export default TodoList;이제 todo 객체를 수정하여 텍스트와 함께 isCompleted 속성을 추가해야 합니다. App.js에서 addTodo 함수를 수정하여 이러한 기능을 추가합니다.
const addTodo = (text) => {
setTodos([...todos, { text, isCompleted: false }]);
};toggleTodo 함수도 추가해야 합니다.
const toggleTodo = (index) => {
const newTodos = todos.map((todo, i) =>
i === index ? { ...todo, isCompleted: !todo.isCompleted } : todo
);
setTodos(newTodos);
};7. 마무리
리액트를 사용하여 간단한 To Do 앱을 만들어 보았습니다. 우리가 구현한 기능은 할 일 추가, 삭제 및 완료 처리 기능입니다. 이 강좌를 통해 리액트의 기본적인 사용법과 컴포넌트 간의 데이터 흐름을 이해하셨길 바랍니다.
앞으로도 이러한 방식으로 다양한 기능을 추가하거나, CSS를 이용해 스타일링을 개선하는 등 여러분의 앱을 발전시킬 수 있습니다. 이를 통해 리액트에 대한 이해도를 높이고, 실제 프로젝트에서 활용할 수 있는 기초를 마련할 수 있습니다.
감사합니다. 다음 강좌에서는 더욱 많은 기능 확장과 리팩토링 방법을 알아보겠습니다. 여러분의 성공적인 리액트 학습을 기원합니다!