이번 강좌에서는 리액트를 사용하여 간단한 To Do 앱을 만들어 보겠습니다. 이 강좌에서는 할 일을 수정하는 기능을 추가하는 방법에 대해 깊이 있게 다룰 것입니다. 리액트를 처음 사용하는 분들도 이해할 수 있도록 기초부터 차근차근 설명할 예정이니 걱정하지 마세요.
1. 리액트 소개
리액트는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 페이스북에서 개발하였으며, 하나의 페이지에서 동적인 웹 애플리케이션을 쉽게 만들 수 있도록 도와줍니다. 리액트의 가장 큰 장점 중 하나는 컴포넌트 기반 구조입니다. 이로 인해 코드의 재사용성이 높아지고, 유지보수가 용이해집니다.
1.1 컴포넌트
리액트에서 모든 것은 컴포넌트로 이루어져 있습니다. 컴포넌트는 화면의 일부를 구성하는 독립적인 블록으로 생각할 수 있습니다. 각 컴포넌트는 자체의 상태(State)와 속성(Props)을 가질 수 있으며, 이를 통해 상위 컴포넌트와 데이터를 주고받을 수 있습니다.
2. To Do 앱 기본 구조 설정
처음에는 To Do 앱의 기본 구조를 설정할 것입니다. 아래의 단계를 따라 진행해 보세요.
2.1 프로젝트 생성
npx create-react-app todo-app위 명령어를 통해 새로운 리액트 프로젝트를 생성합니다. todo-app이라는 폴더 안에 필요한 파일이 생성될 것입니다.
2.2 기본 컴포넌트 구조 만들기
src 폴더 안에 Todo.js 파일을 생성하고, 아래와 같이 기본 구조를 작성합니다.
import React, { useState } from 'react';
const Todo = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const handleAdd = () => {
if (!inputValue) return;
setTodos([...todos, { text: inputValue, isEditing: false }]);
setInputValue('');
};
return (
할 일 목록
setInputValue(e.target.value)} />
{todos.map((todo, index) => (
- {todo.text}
))}
);
};
export default Todo;3. 할 일 수정 기능 추가하기
이제 To Do 앱에 할 일 수정 기능을 추가해 보겠습니다. 사용자가 할 일을 클릭했을 때 해당 항목을 수정할 수 있도록 구현할 것입니다.
3.1 상태 관리 추가
상태 관리 기능을 추가하기 위해, 각 할 일 항목에 대해 편집 모드를 추가해야 합니다. Todo.js 파일을 아래와 같이 수정합니다.
const handleEdit = (index) => {
const updatedTodos = todos.map((todo, idx) => {
if (idx === index) {
return { ...todo, isEditing: !todo.isEditing };
}
return todo;
});
setTodos(updatedTodos);
};
const handleUpdate = (index, newText) => {
const updatedTodos = todos.map((todo, idx) => {
if (idx === index) {
return { text: newText, isEditing: false };
}
return todo;
});
setTodos(updatedTodos);
};3.2 수정하는 UI 만들기
이제 수정하는 UI를 작성하여 사용자가 쉽게 할 일을 수정할 수 있도록 해야 합니다. 아래 코드를 return 문 안에 붙여넣습니다.
{todos.map((todo, index) => (
{todo.isEditing ? (
handleUpdate(index, e.target.value)}
/>
) : (
handleEdit(index)}>{todo.text}
)}
))}3.3 전체 코드
이제 전체 코드는 다음과 같습니다.
import React, { useState } from 'react';
const Todo = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const handleAdd = () => {
if (!inputValue) return;
setTodos([...todos, { text: inputValue, isEditing: false }]);
setInputValue('');
};
const handleEdit = (index) => {
const updatedTodos = todos.map((todo, idx) => {
if (idx === index) {
return { ...todo, isEditing: !todo.isEditing };
}
return todo;
});
setTodos(updatedTodos);
};
const handleUpdate = (index, newText) => {
const updatedTodos = todos.map((todo, idx) => {
if (idx === index) {
return { text: newText, isEditing: false };
}
return todo;
});
setTodos(updatedTodos);
};
return (
할 일 목록
setInputValue(e.target.value)} />
{todos.map((todo, index) => (
-
{todo.isEditing ? (
handleUpdate(index, e.target.value)}
/>
) : (
handleEdit(index)}>{todo.text}
)}
))}
);
};
export default Todo;4. 마무리
축하합니다! 이제 리액트를 사용하여 To Do 앱을 만들고, 할 일을 수정하는 기능까지 추가했습니다. 이 강좌를 통해 리액트의 기본 개념을 이해하고, 실습을 통해 코드를 작성하는 방법을 학습하셨습니다. 향후에는 더 복잡한 상태 관리나 다양한 라이브러리와의 연동을 통해 더욱 많은 기능을 추가해 보세요.
5. 다음 강좌 예고
다음 강좌에서는 To Do 앱에 추가 기능을 더 추가하거나, 리액트 Router를 활용하여 페이지를 관리하는 방법에 대해 다룰 예정입니다. 많은 기대 부탁드립니다!