안녕하세요! 이번 강좌에서는 React를 사용하여 To Do 앱을 만드는 방법에 대해 알아보겠습니다. React는 사용자 인터페이스를 구축하기 위한 라이브러리로, 특히 컴포넌트 기반의 아키텍처로 인해 개발자가 재사용 가능한 UI 구성 요소를 만들 수 있게 해줍니다. To Do 앱은 리액트를 처음 배우는 사람에게 적합한 프로젝트로, 기본적인 CRUD(Create, Read, Update, Delete) 작업을 이해하는 데 도움을 줍니다.
1. 프로젝트 개요
이번 프로젝트에서는 사용자가 할 일을 추가하고, 삭제하며, 완료 여부를 체크할 수 있는 간단한 To Do 앱을 만들어 보겠습니다. 이 앱은 React의 상태 관리 및 이벤트 처리의 기초를 이해하는 데 유용합니다.
2. 필요한 도구 및 라이브러리
- Node.js: Javascript 런타임 환경. React 프로젝트를 설정하고 실행하기 위해 필요합니다.
- npm: Node.js 패키지 매니저로, 필요한 라이브러리를 설치하는 데 사용됩니다.
- React: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.
- Visual Studio Code: 코드 편집기로, 개발 환경을 설정하는 데 사용됩니다.
3. 환경 설정
우선, Node.js가 설치되어 있는지 확인하세요. 설치되어 있지 않다면, Node.js 공식 웹사이트에서 다운로드하여 설치합니다.
설치가 완료되면 다음 명령어를 이용해 새로운 React 앱을 생성합니다:
npx create-react-app todo-app앱 생성이 완료되면, 생성된 디렉터리로 이동하여 앱을 실행합니다:
cd todo-app
npm start브라우저에서 http://localhost:3000을 열면 기본 React 앱이 표시될 것입니다.
4. 프로젝트 구조 이해하기
프로젝트가 생성되면 다음과 같은 폴더 구조를 확인할 수 있습니다:
todo-app/
├── node_modules/
├── public/
└── src/
├── App.css
├── App.js
├── index.css
├── index.js
└── logo.svg
여기서 주로 수정할 파일은 src/App.js입니다. 이 파일의 내용을 수정하여 To Do 앱의 기능을 구현해 나갈 것입니다.
5. 컴포넌트 설계
To Do 앱은 다음과 같은 컴포넌트로 구성될 것입니다:
- ToDoApp: 앱의 주요 컴포넌트로 모든 서브 컴포넌트를 포함합니다.
- ToDoList: 추가된 할 일 목록을 표시합니다.
- ToDoItem: 개별 할 일을 나타내며, 완료 및 삭제 기능을 지원합니다.
- AddToDo: 새로운 할 일을 추가하는 폼을 제공합니다.
5.1 ToDoApp 컴포넌트 설정
src/App.js 파일을 열고 다음과 같이 내용을 수정합니다:
import React, { useState } from 'react';
import ToDoList from './ToDoList';
import AddToDo from './AddToDo';
import './App.css';
const ToDoApp = () => {
const [todos, setTodos] = useState([]);
const addTodo = (todo) => {
setTodos([...todos, todo]);
};
const deleteTodo = (index) => {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
};
const toggleTodo = (index) => {
const newTodos = [...todos];
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
};
return (
To Do List
5.2 ToDoList 컴포넌트 생성
할 일 목록 컴포넌트를 생성하기 위해 src/ToDoList.js 파일을 생성하고 다음 내용을 추가합니다:
import React from 'react';
import ToDoItem from './ToDoItem';
const ToDoList = ({ todos, deleteTodo, toggleTodo }) => {
return (
{todos.map((todo, index) => (
);
};
export default ToDoList;5.3 ToDoItem 컴포넌트 생성
개별 할 일 항목을 표시하는 컴포넌트를 만들기 위해 src/ToDoItem.js 파일을 생성하고 아래와 같이 작성합니다:
import React from 'react';
const ToDoItem = ({ todo, deleteTodo, toggleTodo, index }) => {
return (
toggleTodo(index)}>{todo.text}
);
};
export default ToDoItem;5.4 AddToDo 컴포넌트 생성
새로운 할 일을 추가하는 폼을 생성하기 위해 src/AddToDo.js 파일을 생성하고 다음 코드를 추가합니다:
import React, { useState } from 'react';
const AddToDo = ({ addTodo }) => {
const [inputValue, setInputValue] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (inputValue.trim()) {
addTodo({ text: inputValue.trim(), completed: false });
setInputValue('');
}
};
return (
);
};
export default AddToDo;6. 스타일링
이제 기본적인 기능 구현이 끝났으니, 앱을 조금 더 예쁘게 만들기 위해 스타일링을 추가해보겠습니다. src/App.css 파일을 수정하여 다음과 같이 스타일을 추가합니다:
.todo-app {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
form {
display: flex;
justify-content: space-between;
}
form input {
flex: 1;
margin-right: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 10px 0;
}
.completed {
text-decoration: line-through;
color: gray;
}7. 앱 실행 및 테스트
모든 컴포넌트와 스타일이 준비되었으므로, 앱을 실행해 보세요. 브라우저에서 http://localhost:3000을 열고 할 일을 추가하고, 삭제 및 완료 상태를 변경하는 기능이 제대로 작동하는지 확인합니다.
8. 마무리 및 추가 기능
이제 기본적인 To Do 앱이 완성되었습니다. 하지만 리액트를 더 잘 활용하기 위해 추가 기능을 고려해볼 수 있습니다. 예를 들어:
- 할 일 리스트를 로컬 스토리지에 저장하여 새로고침 후에도 유지하기
- 할 일을 편집하는 기능 추가하기
- 필터 기능 추가하여 완료된 할 일만 보기
이번 강좌에서 배운 내용을 바탕으로 여러분의 아이디어를 적용해보세요! 감사합니다!