React는 Facebook이 개발한 라이브러리로, 사용자 인터페이스를 구축하는 데 사용됩니다. 리액트를 이용하여 효율적이고 재사용 가능한 UI 컴포넌트를 만들 수 있습니다. 본 강좌에서는 To Do 앱을 예제로 사용하여 리액트를 이용한 프로젝트 준비하는 방법을 배우게 됩니다. 이 강좌를 통해 리액트의 기본 개념과 프로젝트를 준비하는 과정에 대해 자세히 알아보도록 하겠습니다.
1. 프로젝트 개요
To Do 앱은 사용자가 할 일을 추가하고 삭제할 수 있는 간단한 애플리케이션입니다. 본 앱을 통해 다음과 같은 기능을 구현하게 됩니다:
- 할 일 추가 기능
- 할 일 삭제 기능
- 할 일 완료 표시 기능
- 할 일 필터링 기능 (모두, 진행중, 완료)
이 프로젝트는 리액트를 처음 접하는 개발자들에게 좋은 연습이 될 것입니다. 단계별로 진행하면서 다양한 리액트 개념을 익힐 수 있습니다.
2. 개발 환경 설정
To Do 앱을 개발하기 위해서는 먼저 개발 환경을 설정해야 합니다. 아래의 단계에 따라 진행해 주세요.
2.1 Node.js 설치
React는 Node.js 환경에서 실행됩니다. Node.js가 설치되어 있지 않다면, 다음 링크에서 다운로드하여 설치합니다: Node.js 공식 사이트. 설치가 완료된 후, 아래의 명령어로 Node.js가 잘 설치되었는지 확인합니다.
node -vnpm -v2.2 Create React App 사용
React 프로젝트를 빠르게 설정하기 위해 Create React App을 사용합니다. 아래의 명령어로 새로운 프로젝트를 생성합니다.
npx create-react-app todo-app위 명령어는 `todo-app`이라는 이름의 새로운 리액트 프로젝트를 생성합니다. 생성이 완료된 후 해당 디렉토리로 이동합니다.
cd todo-app2.3 프로젝트 구조 이해하기
생성된 리액트 프로젝트에는 기본적으로 여러 폴더와 파일이 생성됩니다. 주요 폴더 구조는 다음과 같습니다:
- node_modules: 프로젝트의 의존성이 저장되는 폴더입니다.
- public: 정적 파일이 저장되는 폴더입니다.
- src: 리액트 컴포넌트와 앱의 주요 로직이 들어가는 폴더입니다.
- package.json: 프로젝트의 메타 정보를 담고 있는 파일입니다.
3. To Do 앱 구현하기
이제 본격적으로 To Do 앱을 구현해보겠습니다. 다음 단계들을 따라가며 코드를 작성해보세요.
3.1 App 컴포넌트 만들기
`src` 폴더 안에 `App.js` 파일을 열어서 아래와 같이 수정합니다.
import React, { useState } from 'react';
import './App.css';
function App() {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTodo = () => {
if (inputValue.trim()) {
setTodos([...todos, { text: inputValue, completed: false }]);
setInputValue('');
}
};
return (
To Do List
setInputValue(e.target.value)}
placeholder="할 일을 입력하세요"
/>
{todos.map((todo, index) => (
- {todo.text}
))}
);
}
export default App;
3.2 할 일 삭제 기능 추가하기
이제 각 할 일을 삭제할 수 있는 기능을 추가해보겠습니다. `addTodo` 함수 아래에 아래의 함수를 추가합니다.
const removeTodo = (index) => {
setTodos(todos.filter((_, i) => i !== index));
};
그리고 `
{todos.map((todo, index) => (
{todo.text}
))}
3.3 완료 표시 기능 추가하기
사용자가 할 일을 완료 상태로 변경할 수 있는 기능도 추가해보겠습니다. 먼저, 할 일 항목의 상태를 업데이트하는 함수를 추가합니다.
const toggleComplete = (index) => {
const newTodos = [...todos];
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
};
그 다음, `
toggleComplete(index)}>
{todo.text}
3.4 필터링 기능 추가하기
마지막으로 할 일을 필터링할 수 있는 기능을 추가하겠습니다. 필터 상태를 관리하기 위해 상태 변수를 추가합니다.
const [filter, setFilter] = useState('all');
아래의 조건문을 사용하여 할 일 목록을 필터링합니다.
const filteredTodos = todos.filter(todo => {
if (filter === 'completed') return todo.completed;
if (filter === 'active') return !todo.completed;
return true;
});
마지막으로 필터 버튼을 추가하여 사용자가 선택할 수 있게 합니다.
{filteredTodos.map((todo, index) => (
- toggleComplete(index)}>
{todo.text}
))}
4. 마무리 및 배포
To Do 앱의 모든 기능을 구현하였습니다. 마지막으로 앱을 테스트한 후, 배포를 진행할 차례입니다.
4.1 앱 테스트하기
로컬에서 앱을 실행하여 기능이 잘 작동하는지 확인합니다. 아래의 명령어로 로컬 서버를 시작합니다.
npm start4.2 배포하기
앱이 잘 작동하면, 이제 배포할 차례입니다. 여러 배포 옵션이 있지만, Create React App이 제공하는 `build` 명령어를 사용하여 최적화된 코드를 생성할 수 있습니다.
npm run build생성된 `build` 폴더를 서버에 업로드하거나, Netlify, Vercel과 같은 플랫폼을 사용하여 배포할 수 있습니다.
5. 결론
이제 리액트를 사용하여 간단한 To Do 앱을 만들어 보았습니다. 이 과정을 통해 리액트의 핵심 개념과 앱 개발의 기본 프로세스를 이해할 수 있었습니다. 앞으로 더욱 복잡한 애플리케이션을 개발할 수 있는 기반이 되었기를 바랍니다.
추가적으로 이 프로젝트에 기능을 더하거나 디자인을 수정하여 더 발전된 버전을 만들어보는 것도 좋은 연습이 될 것입니다. 리액트를 응용하여 다른 프로젝트도 시도해 보세요!